React Router源映射解析失败（ENOENT文件缺失）求助

问题原因 #

这个警告是因为source-map-loader尝试读取React Router包的源码映射文件，但配置里的路径指向了本地不存在的/Users/X/crm/packages/目录（实际依赖包存放在node_modules中），属于源码映射路径错误导致的编译警告，不会影响应用正常运行，但会干扰编译日志。

解决方法 #

方法1：修改Webpack配置排除node_modules的源码映射加载

如果项目使用自定义Webpack配置，打开webpack.config.js，在module.rules中给source-map-loader添加排除规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        enforce: 'pre',
        use: ['source-map-loader'],
        exclude: /node_modules/, // 排除node_modules目录下的文件
      },
    ],
  },
};

方法2：Create React App项目禁用源码映射生成

如果是Create React App创建的项目，有两种方式：

• 在项目根目录新建.env文件，添加一行：

  GENERATE_SOURCEMAP=false
  

• 或者修改package.json中的启动命令：

  "scripts": {
    "start": "GENERATE_SOURCEMAP=false react-scripts start",
    "build": "GENERATE_SOURCEMAP=false react-scripts build"
  }
  

方法3：重新安装依赖包

如果依赖安装不完整也可能触发这类警告，执行以下命令重置依赖：

# 删除现有依赖和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install # 使用yarn的话执行 yarn install

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