Nextjs+Typescript+Antd自定义目录配置触发Compilation报错

报错核心触发逻辑 #

1. TypeError: The 'compilation' argument must be an instance of Compilation 成因 #

该报错属于Webpack编译层的实例/版本冲突，和TypeScript配置无直接关联：

• 调整源码目录、输出目录的过程中，为适配Antd按需加载、样式兼容性修改next.config.js时，手动引入了全局安装的Webpack依赖，而非复用Next.js内置的Webpack编译实例
• 后续集成的Antd相关处理插件（样式loader、按需加载插件）在调用编译API时，传入的compilation对象来自全局Webpack实例，而非Next内置的编译上下文，直接触发类型校验失败

2. Error: Cannot find module '/MyApp/_next/build-manifest.json' 成因 #

该报错属于静态资源路径映射错配：

• build-manifest.json是Next.js构建阶段自动生成在默认输出目录（默认为.next）下_next/子路径的核心元数据文件
• 修改Next默认输出目录、调整源码结构（如将根目录路由文件夹迁移到src下）时，未同步对齐资源访问路径配置：如果硬写了不符合实际项目层级的绝对路径，或配置的basePath、assetPrefix和实际构建产物的目录层级不匹配，运行时就会沿错误的固定路径查找元数据文件，最终触发模块找不到的错误

对应解决方法 #

• 清理next.config.js中手动引入的全局Webpack依赖，所有自定义Webpack配置直接使用配置函数入参中传入的编译实例，不要在配置文件中单独通过require('webpack')引入全局依赖，避免多Webpack实例冲突
• 核对路径相关配置：
  • 若仅调整源码目录到src文件夹下，无需修改distDir、assetPrefix等输出类配置，Next.js会自动识别src目录下的路由入口文件
  • 如需自定义输出目录，保证distDir配置的路径符合实际项目层级，不要硬写不匹配的绝对路径；如果配置了basePath: '/MyApp'，需确保构建产物的静态资源路径和该配置完全对齐，避免层级错配
• 清理项目残留缓存与依赖：删除node_modules目录、自定义的旧构建输出目录后，重新安装依赖再启动项目，避免旧编译产物残留导致的路径识别错误
• Antd适配优先使用Next生态推荐的官方适配组件，不要沿用旧版纯JS项目中手动配置Webpack按需加载的逻辑，减少自定义Webpack配置引入的实例冲突

内容的提问来源于stack exchange，提问作者Afsanefda