Next.js + MDX 增强不允许 Typescript 模板文件答案

【问题标题】：Next.js + MDX Enhanced Not Allowing Typescript Template FilesNext.js + MDX 增强不允许 Typescript 模板文件
【发布时间】：2021-05-18 00:50:14
【问题描述】：

我已经非常关注https://magrippis.com/blog/2020/how-to-setup-MDX-in-Nextjs 此处的教程，使用此 Next.js 插件 https://github.com/hashicorp/next-mdx-enhanced，但是当我尝试添加扩展名为 .tsx 或 .ts 的模板文件或引用模板文件中的另一个组件时那是 .tsx 或 .ts 我收到一条错误消息“找不到模块”。我可以使用不在模板中的其他 .tsx 文件，例如，我可以将它用于模板中没有引用的页面或组件。

next.config.js 文件：

const withPlugins = require('next-compose-plugins');
const rehypePrism = require('@mapbox/rehype-prism');

const mdx = require('next-mdx-enhanced')({
  defaultLayout: true,
  fileExtensions: ['mdx', 'md'],
  rehypePlugins: [rehypePrism],
});

// you may tweak other base Next options in this object
// we are using it to tell Next to also handle .md and .mdx files
const nextConfig = { 
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx', 'md'],
  future: {
    webpack5: false,
  },

};

module.exports = withPlugins(
  [
    mdx,
    // you may add more plugins, and their configs, to this array
  ],
  nextConfig
)

.babelrc 文件（不确定这是否重要）：


{
    "presets": ["next/babel"],
    "plugins": ["import-glob-array"]
  }

【问题讨论】：

标签： next.js

【解决方案1】：

我不知道为什么，但我不得不更新 webpack 配置以包含“ts”和“tsx”扩展。下面是我用来完成此操作的 next.config.js 中的代码，可以将其与上面的原始代码进行比较以查看差异。

const withPlugins = require('next-compose-plugins');
const rehypePrism = require('@mapbox/rehype-prism');

const mdx = require('next-mdx-enhanced')({
  defaultLayout: true,
  fileExtensions: ['mdx', 'md'],
  rehypePlugins: [rehypePrism],
});

const webPackConfig = (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
  // Note: we provide webpack above so you should not `require` it

  // Add support for .tsx and .ts templates
  config.resolve.extensions.push('.tsx', '.ts');

  // Important: return the modified config
  return config
};

// you may tweak other base Next options in this object
// we are using it to tell Next to also handle .md and .mdx files
const nextConfig = { 
  pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'mdx', 'md'],
  webpack: webPackConfig,
};

module.exports = withPlugins(
  [
    mdx,
    // you may add more plugins, and their configs, to this array
  ],
  nextConfig
)

【讨论】：