本地开发React应用时解析Source Map失败问题求助

WARNING in ./node_modules/timeago.js/esm/index.js Module Warning (from ./node_modules/react-scripts/node_modules/source-map-loader/dist/cjs.js): Failed to parse source map from '/Users/mayankrawat/Desktop/Development/maps/frontend/node_modules/timeago.js/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/mayankrawat/Desktop/Development/maps/frontend/node_modules/timeago.js/src/index.ts'

问题原因 #

这个警告的核心是timeago.js的npm包未包含src/index.ts源文件，但它的ESM模块附带的source map文件却指向了这个不存在的路径，而React Scripts默认启用的source-map-loader会尝试解析所有依赖的source map，因此触发了找不到文件的警告。

解决思路 #

• 方法一：针对性禁用source-map-loader对timeago.js的处理
  如果不需要timeago.js的source map，可以直接修改项目package.json的启动命令，通过环境变量跳过依赖的source map解析：

  "scripts": {
    "start": "DISABLE_SOURCE_MAP=true react-scripts start",
    "build": "DISABLE_SOURCE_MAP=true react-scripts build"
  }
  

  要是需要保留其他依赖的source map，可借助react-app-rewired自定义webpack配置，单独排除timeago.js：

  // 项目根目录新建config-overrides.js
  module.exports = function override(config, env) {
    config.module.rules.forEach(rule => {
      if (rule.oneOf) {
        rule.oneOf.forEach(oneOfRule => {
          if (oneOfRule.loader?.includes('source-map-loader')) {
            oneOfRule.exclude = /node_modules\/timeago.js/;
          }
        });
      }
    });
    return config;
  };
  

  之后记得把scripts里的命令换成react-app-rewired对应的启动/构建命令。

• 方法二：更换依赖库
  检查timeago.js的最新版本是否修复了该问题，若未修复，可改用react-timeago（timeago.js的React封装版，大概率规避此问题），或者date-fns这类成熟的时间处理库。

• 方法三：临时补全缺失文件（不推荐）
  从timeago.js的代码仓库下载src/index.ts，放到项目node_modules/timeago.js/src/目录下，但这种操作会在执行npm install后被覆盖，仅适合临时测试用。

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