Next.js 13.4.1+Webpack5.89.0生产环境Chunk未生成Source Maps问题

项目环境 #

• Next.js 13.4.1
• Webpack 5.89.0

问题描述 #

已在next.config.js中配置启用生产环境Source Maps，但所有chunks/*.js文件对应的.map文件完全缺失，仅.next/server/等服务端相关目录下的文件生成了Source Maps。

当前配置（next.config.js） #

const nextConfig = {
 ...
  productionBrowserSourceMaps: true,
  webpack(webpackConfig, { isServer }) {
    if (!isServer) {
        webpackConfig.devtool = 'source-map';
      
        // 可选：自定义Source Maps文件名
        webpackConfig.output = {
         ...webpackConfig.output,
             // 确保Chunk文件也生成Source Maps
         sourceMapFilename: '[file].map',
        };
      
        // 调试用：打印Webpack配置以验证修改
        console.log(config); // 注意此处存在错误，应为webpackConfig
      }
  },
};
module.exports = nextConfig;

构建后查找结果 #

$ find .next -type f -name "*.map"
.next/server/edge-runtime-webpack.js.map
.next/server/src/middleware.js.map
.next/static/css/e246aa7cf79af19a.css.map

已尝试的解决方法 #

• 在next.config.js中显式设置devtool为'source-map'
• 检查无阻止Chunk生成Source Maps的条件配置
• 执行清理构建（删除.next目录和node_modules/.cache）排除缓存影响
• 查阅Next.js官方文档及社区论坛未找到有效解决方案

问题 #

1. Next.js 13.4.1或Webpack 5.89.0是否存在导致该问题的已知Bug？
2. 是否有针对Chunk文件Source Maps生成的遗漏配置步骤？
3. 针对Next.js该问题的进一步排查或调试建议？

解答 #

1. 已知Bug情况 #

Next.js 13.4.x系列确实存在和生产环境客户端Source Maps相关的已知问题，13.4.1版本中部分用户反馈过productionBrowserSourceMaps配置对客户端Chunk的生效逻辑异常，导致Source Maps生成被跳过。Webpack 5.89.0本身没有直接引发该问题的已知Bug，但Next.js对Webpack的封装逻辑可能覆盖了自定义配置，从而导致冲突。

2. 遗漏的配置步骤 #

• 移除自定义的sourceMapFilename配置：Next.js有内置的Source Maps命名规则，手动覆盖webpackConfig.output.sourceMapFilename会破坏原有生成逻辑，建议删除这部分代码。
• 检查压缩插件配置：如果项目中自定义了terser-webpack-plugin等压缩插件，需确保其sourceMap参数设为true，否则会阻止Source Maps生成。Next.js默认的压缩插件可能被自定义Webpack配置覆盖，需确认这一点。
• 确保productionBrowserSourceMaps处于顶层配置：该配置必须直接放在nextConfig对象的顶层，不能被嵌套在条件判断或其他配置项中，否则可能不生效。

3. 排查与调试建议 #

• 简化Webpack配置：移除手动设置的devtool，仅保留productionBrowserSourceMaps: true。Next.js会根据该配置自动为生产环境客户端设置合适的devtool值，手动设置可能引发冲突。
• 修正配置中的错误：当前代码中console.log(config)是错误的，应改为console.log(webpackConfig)，打印完整的客户端Webpack配置，检查devtool、output及插件列表，确认是否有禁用Source Maps的配置。
• 升级Next.js版本：官方在13.4.2及后续小版本中修复了多个Source Maps相关的Bug，升级到最新的13.4.x版本大概率能解决问题。
• 查看构建日志：执行构建时添加--debug参数，查看日志中关于Source Maps生成的详细输出，定位是否有步骤被跳过或报错。

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