React/TS项目‘Failed to parse source map’错误修复咨询

这些错误是因为html5-qrcode发布包中的source map路径配置有误，指向了不存在的文件，导致webpack的source-map-loader解析失败。试试下面的解决办法：

方案1：让Webpack跳过node_modules的source map解析 #

如果用的是Create React App（CRA）项目，需要借助工具修改配置：

• 先装依赖：

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

• 在项目根目录新建config-overrides.js，写入：

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

• 把package.json里的scripts改成：

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

如果是自定义Webpack配置，直接在source-map-loader的规则里加上exclude: /node_modules/就行。

方案2：降级到无此问题的版本 #

卸载当前版本：

npm uninstall html5-qrcode

安装测试过没问题的旧版本（比如1.3.8）：

npm install html5-qrcode@1.3.8

方案3：手动修复模块内的source map路径（不推荐，更新模块会失效） #

找到node_modules/html5-qrcode/esm/camera/core-impl.js，删掉末尾的//# sourceMappingURL=../src/camera/core-impl.ts.map这一行；
同样处理node_modules/html5-qrcode/third_party/index.js里的source map引用。

内容的提问来源于stack exchange，提问作者Cinc-B