Next.js 13.4.1 和 Webpack 5.89.0：不为生产中的块生成源映射

Question

我正在使用 Webpack（版本 5.89.0）开发 Next.js 项目（版本 13.4.1），并遇到一个问题：在生产版本中没有为我的 JavaScript 块文件生成源映射。这个问题严重影响了我调试生产特定问题的能力。

以下是我的设置以及迄今为止我所尝试的内容的简要概述：

问题： 在我的生产构建中，尽管配置了 next.config.js 以启用生产构建的源映射生成，但所有 chunks/*.js 文件都缺少 .map 文件。有趣的是，为其他文件（例如 .next/server/...）生成源映射，但块文件明显不存在。

配置（next.config.js）：

const nextConfig = {
 ...
  productionBrowserSourceMaps: true,
  webpack(webpackConfig, { isServer }) {
    if (!isServer) {
        webpackConfig.devtool = 'source-map';
      
        // Optionally, customize the filenames of the source maps
        webpackConfig.output = {
         ...webpackConfig.output,
             // Ensure chunk files also have source maps
         sourceMapFilename: '[file].map',
        };
      
        // For debugging, log the Webpack config to verify changes
        console.log(config);
      }
  },
};
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”。
• 确保没有条件配置可能会阻止块文件的源映射生成。
• 进行干净的构建，以防止任何缓存问题影响生成过程。
• 搜索 Next.js 文档和社区论坛，但没有找到解决方案。

问题：

• Next.js 13.4.1 或 Webpack 5.89.0 中的源映射生成是否存在可能导致此行为的已知问题？
• 是否存在我忽略的特定于块文件源映射生成的其他配置步骤或设置？
• 关于如何在 Next.js 中进一步诊断或解决此问题有什么建议吗？

Answer 1

你找到解决办法了吗？我也面临类似的问题。