React项目中timeago.js源码映射解析失败警告求助

问题描述 #

我是React新手，最近遇到timeago.js库的源码映射解析警告：source-map-loader无法找到node_modules/timeago.js/src下对应的.ts源文件，提示ENOENT错误。尝试在package.json中添加GENERATE_SOURCEMAP=false后，警告仍存在。

警告详情 #

WARNING in ./node_modules/timeago.js/esm/format.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\format.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\format.ts'

WARNING in ./node_modules/timeago.js/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\index.ts'
WARNING in ./node_modules/timeago.js/esm/lang/en_US.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\lang\en_US.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\lang\en_US.ts'

WARNING in ./node_modules/timeago.js/esm/lang/zh_CN.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\lang\zh_CN.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\lang\zh_CN.ts'

WARNING in ./node_modules/timeago.js/esm/realtime.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\realtime.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\realtime.ts'

WARNING in ./node_modules/timeago.js/esm/register.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\register.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\register.ts'

WARNING in ./node_modules/timeago.js/esm/utils/date.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\utils\date.ts' file: Error: ENOENT: no such file or directory, open 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\utils\date.ts'

WARNING in ./node_modules/timeago.js/esm/utils/dom.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\utils\dom.ts' file: 
Error: ENOENT: no such file or directory, open 'C:\Users\SMDP-\Desktop\media-social\client\node_modules\timeago.js\src\utils\dom.ts'

已尝试方案 #

在package.json中添加GENERATE_SOURCEMAP=false，无效。

可行解决方法 #

方法1：配置webpack忽略timeago.js的source map解析 #

如果是自定义webpack配置，修改webpack.config.js，在source-map-loader的规则中排除timeago.js：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        enforce: 'pre',
        use: ['source-map-loader'],
        exclude: /node_modules\/timeago.js/, // 添加此排除项
      },
    ],
  },
};

如果用Create React App且未eject，可借助craco修改配置，在craco.config.js中添加：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 找到source-map-loader的规则
      const sourceMapRule = webpackConfig.module.rules.find(
        rule => rule.use?.some(item => item.loader === 'source-map-loader')
      );
      if (sourceMapRule) {
        // 排除timeago.js
        sourceMapRule.exclude = /node_modules\/timeago.js/;
      }
      return webpackConfig;
    },
  },
};

方法2：切换timeago.js版本 #

当前版本的timeago.js打包后可能存在source map路径错误，尝试升级或降级版本，比如安装4.0.2版本：

npm install timeago.js@4.0.2

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

如果不需要source map解析，可直接移除webpack中的source-map-loader规则，但这会影响其他库的source map支持，仅作为临时方案。

内容的提问来源于stack exchange，提问作者Deepak Anto J