Next.js 11部署到Vercel报ModuleNotFoundError空依赖错误该如何解决？

问题根源定位 #

触发报错的直接原因是next.config.js中webpack配置语法错误：你定义的use: [ ... ]数组没有挂载到config.module.rules的对应规则下，属于无效悬空配置，webpack5解析时会识别为无请求的空依赖，直接触发报错。
另外你额外配置的babel-loader属于冗余操作，Next.js11已经内置了完整的babel编译逻辑，重复配置会导致编译冲突。

修复步骤 #

1. 修正next.config.js的webpack配置 #

替换你现有的webpack配置段为以下内容：

webpack: (config, options) => {
    config.resolve.alias['components'] = path.join(__dirname, 'components')
    config.resolve.alias['public'] = path.join(__dirname, 'public')
    // 移除冗余的悬空use配置和额外babel-loader配置
    return config
},

如果确实需要自定义babel规则，直接在项目根目录新建.babelrc文件配置即可，不要在next.config.js里重复声明loader。

2. 全局排查空导入语句 #

在项目所有.js、.jsx、.ts、.tsx文件中搜索是否存在以下无效导入写法：

• 空字符串导入：import '' 或者 require('')
• 动态导入参数为空：import(someEmptyVar) 其中变量运行时为空值
• 导入路径拼写错误导致路径解析为空

3. 校验环境变量配置 #

确认你.env系列文件中存在IMAGES_DOMAIN_NAME和AWS_IMAGES_DOMAIN_NAME的赋值，两个变量为空会导致next/image的domains配置为空，也可能触发同类依赖解析错误。

4. 清理缓存后重新构建 #

执行以下命令清理冗余缓存后再测试构建：

rm -rf .next node_modules/.cache
yarn install
yarn build

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