使用Next.js新app目录配置@next/mdx时遇模块找不到错误

AI 小北

2026-8-1

解决@next/mdx在Next.js App目录中出现'next-mdx-import-source-file'找不到的问题

可能原因及修复步骤

统一@next/mdx与Next.js版本
这个错误大多是因为两者版本不兼容导致的。确保@next/mdx和Next.js主版本完全一致，比如Next.js用13.x分支，@next/mdx也用13.x；Next.js 14.x则对应@next/mdx 14.x。执行命令统一版本：
```
npm install next@latest @next/mdx@latest
# yarn用户执行
yarn add next@latest @next/mdx@latest
```

修正next.config.js的MDX配置
App目录下无需自定义importSource配置，多余的配置会导致MDX编译时引用不存在的模块。正确的配置示例：

const withMDX = require('@next/mdx')()

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
  experimental: {
    appDir: true,
  },
}

module.exports = withMDX(nextConfig)

如果你之前手动添加了importSource参数，直接删除即可。

清除缓存并重启服务
旧缓存可能残留错误的编译内容，执行以下操作后重启开发服务器：
```
rm -rf .next node_modules/.cache
npm run dev
```
重新安装依赖
若以上步骤无效，删除依赖目录和锁文件后重新安装：
```
rm -rf node_modules package-lock.json
npm install
```