.js.map source map parsing warnings in Webpack source-map-loader

[maneetgoyal]

Getting the following warning:

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

Looking at the build routine in package.json, this package has:

"build:esm": "rimraf ./esm && tsc --module ESNext --outDir esm",

TSC emits source map (abcd.js.map) like this:

{"version":3,"file":"date.js","sourceRoot":"","sources":["../../src/utils/date.ts"],"names":[],"mappings":"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"}

The issue is related to "source" property above. Since src folder is missing from the timeago.js NPM distribution, Webpack source-map-loader is throwing warnings.

---

My current solution for the Webpack config is:

{
          enforce: "pre", // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
          test: /\.js$/,
          loader: require.resolve("source-map-loader"),
          /**
           * timeago.js has issues since their source maps refer to the actual TS source files.
           */
          exclude: [/node_modules\/timeago.js/],
        }

which basically tells source-map-loader to ignore parsing the source maps for timeago.js.

---

Is any other solution suggested? Since end users won't have access to TS source files in the dist, should this library stop distributing source maps altogether?

[kallaspriit]

I'm also facing the same problem and since I'm using Create React App then the webpack config is not easily configurable.

[cmdcolin]

I think adding "src" to the "files" array in package.json would fix this (in this package, not as a workaround in consumers of timeago)

[kYem]

This would be useful to reduce the noise created by webpack, any downsides of adding src files?

[imagine10255]

You can remove the warning by adding GENERATE_SOURCEMAP=false to your .env file

Actually, CRA with Webpack 5.x cause it. They are working on resolving (https://github.com/facebook/create-react-app/pull/11752)

[cmdcolin]

just for anyone that still lands on this, an alternative library that has a timeago.js-style feature is date-fns https://date-fns.org/

(big thanks to the timeago.js devs, just mentioning :))