React项目使用html2pdf.js出现source map解析警告的解决办法

你遇到的警告是因为html2pdf.js的打包文件里引用了不存在的es6-promise.map source map文件，react-scripts的source-map-loader会尝试解析这个文件导致报错。以下是几个可行的解决办法：

• 方案一：通过react-app-rewired修改webpack配置（推荐，无需eject）

  1. 安装依赖：npm install react-app-rewired --save-dev
  2. 在项目根目录创建config-overrides.js文件，添加以下内容：

  module.exports = function override(config, env) {
    // 找到source-map-loader的规则，排除html2pdf.js
    const sourceMapLoaderRule = config.module.rules.find(rule => rule.loader && rule.loader.includes('source-map-loader'));
    if (sourceMapLoaderRule) {
      sourceMapLoaderRule.exclude = /html2pdf\.js/;
    }
    return config;
  };
  

  3. 修改package.json里的启动命令：

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

  4. 重启开发服务器，警告应该会消失。

• 方案二：手动添加缺失的source map文件

  1. 查看html2pdf.js依赖的es6-promise版本，在node_modules/es6-promise/package.json里找到版本号。
  2. 找到对应版本的es6-promise.map文件，下载到node_modules/html2pdf.js/dist/目录下。
     注意：这个方法在更新依赖后可能需要重复操作，不够持久。

• 方案三：调整html2pdf.js版本
  尝试降级或升级html2pdf.js到其他版本，比如查看其项目issues，找没有这个source map问题的版本。执行命令安装指定版本：npm install html2pdf.js@x.x.x --save（替换x.x.x为具体版本号）。

• 方案四：临时禁用全局source map（不推荐）
  在启动命令中添加环境变量，关闭整个项目的source map生成：

  GENERATE_SOURCEMAP=false npm start
  

  这个方法会让所有依赖都不生成source map，可能影响开发时的调试体验，仅作为临时应急方案。

原警告信息：
WARNING in ./node_modules/html2pdf.js/dist/html2pdf.js
Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'D:\Projects\CRM Dev\crm_dev_repo\frontend\node_modules\html2pdf.js\dist\es6-promise.map' file: Error: ENOENT: no such file or directory, open 'D:\Projects\CRM Dev\crm_dev_repo\frontend\node_modules\html2pdf.js\dist\es6-promise.map'

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