React项目执行npm start时出现Source Map解析失败异常求助

别担心，这个警告和你项目里的.ts文件引用没关系，也不是你写错了扩展名——问题出在base64-arraybuffer这个依赖包本身的source map配置上。它的发布包里只包含了编译后的dist文件，但dist文件的source map却指向了未被发布的src/index.ts，所以webpack的source-map-loader找不到这个文件才抛出警告，不影响项目运行但看着闹心对吧？

下面给你几个可行的解决方法：

方法1：针对性忽略该包的source map检查 #

这是最推荐的方式，既保留其他包的source map功能，又消除这个特定警告：

• 如果你用的是Create React App且不想eject：
  1. 安装依赖：npm install react-app-rewired customize-cra --save-dev
  2. 在项目根目录创建config-overrides.js文件，写入：

     const { override, addWebpackModuleRule } = require('customize-cra');
     
     module.exports = override(
       addWebpackModuleRule({
         test: /\.js$/,
         enforce: 'pre',
         exclude: /node_modules\/base64-arraybuffer/,
         loader: 'source-map-loader'
       })
     );
     

  3. 修改package.json里的启动脚本，把react-scripts替换成react-app-rewired：

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

• 如果已经eject了项目：
  找到webpack.config.js中source-map-loader的规则，在exclude数组里加上/base64-arraybuffer/，比如：

  {
    enforce: 'pre',
    exclude: /@babel(?:\/|\\{1,2})runtime|base64-arraybuffer/,
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    loader: require.resolve('source-map-loader'),
  }
  

方法2：升级相关依赖 #

这个问题可能是依赖包的旧版本bug，尝试升级以下包到最新版，说不定官方已经修复了source map路径问题：

npm update socket.io-client engine.io-client base64-arraybuffer

方法3：临时禁用source-map-loader（不推荐） #

如果只是想快速消除警告，可以暂时关闭source-map-loader，但这会丢失所有依赖包的source map支持，不利于调试：

• 对于eject后的项目，直接注释掉webpack配置里的source-map-loader规则；
• 对于CRA项目，同样用react-app-rewired修改配置，关闭source map相关设置。

总结一下，这个问题完全是第三方依赖的锅，和你的代码无关，用方法1或者方法2基本就能解决啦。

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