如何忽略React Webpack关于依赖项源映射的警告

问题背景 #

使用create-react-app搭建的项目，react-scripts版本为5.0.1，无自定义Webpack配置。每次构建（包括dev-server自动触发的构建）时，都会收到大量如下形式的Webpack警告：

WARNING in ./node_modules/myDependency/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'path\to\project\node_modules\myDependency\index.ts' file: Error: ENOENT: no such file or directory, open 'path\to\project\node_modules\myDependency\index.ts'

（运行环境为Windows，路径分隔符为反斜杠）

现有方案多建议设置GENERATE_SOURCEMAP=false，但这会完全禁用源映射，不利于项目代码的问题排查。需要保留项目自身代码的源映射，仅屏蔽node_modules下依赖项的源映射警告。

解决方案 #

方法1：用react-app-rewired修改Webpack配置（推荐） #

1. 安装依赖：

npm install react-app-rewired customize-cra --save-dev

2. 在项目根目录创建config-overrides.js文件，写入以下配置：

const { override, addWebpackModuleRule } = require('customize-cra');

module.exports = override(
  // 调整source-map-loader规则，排除node_modules目录
  addWebpackModuleRule({
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    enforce: 'pre',
    use: ['source-map-loader'],
    exclude: /node_modules/,
  }),
);

3. 修改package.json中的脚本命令，替换为rewired版本：

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }
}

配置完成后，source-map-loader只会处理项目自身代码，不再扫描node_modules下的依赖，即可屏蔽相关警告。

方法2：临时过滤依赖的源映射处理（无需额外依赖） #

在项目根目录创建.env文件，添加：

DISABLE_SOURCE_MAP_LOADER=true

然后在项目入口文件（如src/index.js）顶部加入以下代码：

if (process.env.DISABLE_SOURCE_MAP_LOADER) {
  require('source-map-loader').custom = function() {
    return {
      loader: 'source-map-loader',
      options: {
        filterSourceMappingUrl: (url, resourcePath) => {
          // 仅处理非node_modules下的文件
          return !resourcePath.includes('node_modules');
        },
      },
    };
  };
}

这种方式无需安装额外依赖，通过覆盖source-map-loader的配置实现过滤。

注意事项 #

• 方法1的配置更清晰，不会侵入项目业务代码，是更稳定的方案。
• 若后续升级react-scripts版本，需确认react-app-rewired和customize-cra是否兼容新版本。

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