如何配置NextJS使构建产物包含第三方库的Source Map？

核心原因 #

NextJS默认会忽略node_modules目录下依赖的Source Map，同时生产环境默认不生成完整的浏览器端Source Map，导致第三方库抛出异常时无法查看可读的堆栈跟踪。

配置步骤 #

1. 开启生产环境浏览器端Source Map
   在项目根目录的next.config.js中添加productionBrowserSourceMaps配置，让NextJS生成完整的生产环境Source Map：

/** @type {import('next').NextConfig} */
const nextConfig = {
  productionBrowserSourceMaps: true,
  // 其他现有配置...
};

module.exports = nextConfig;

2. 配置Webpack加载第三方库的Source Map
   如果仅开启上面的配置仍无法加载目标库的Source Map，需要通过Webpack的source-map-loader来专门处理该库的Source Map：

• 首先安装依赖：

npm install source-map-loader --save-dev

• 然后修改next.config.js的Webpack配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  productionBrowserSourceMaps: true,
  webpack: (config, { isServer, dev }) => {
    // 仅在生产环境的浏览器端构建时处理
    if (!dev && !isServer) {
      config.module.rules.push({
        // 匹配目标库的mjs文件
        test: /\.mjs$/,
        // 指定目标库的node_modules路径
        include: /node_modules\/[你的第三方库名称]/,
        // 使用source-map-loader加载对应的Source Map
        use: ['source-map-loader'],
        enforce: 'pre'
      });
    }
    // 强制生产环境使用source-map类型的devtool，确保Source Map完整
    if (!dev) {
      config.devtool = 'source-map';
    }
    return config;
  }
};

module.exports = nextConfig;

额外注意事项 #

• 确认第三方库的lib.mjs文件末尾是否包含正确的//# sourceMappingURL=lib.mjs.map注释，若路径错误，需要手动调整或联系库作者修复。
• 如果该库使用了ES模块语法且NextJS默认未转译，可同时在next.config.js中添加transpilePackages: ['你的第三方库名称']，确保库代码被正确处理。

内容的提问来源于stack exchange，提问作者Ingun전인건