How can I fix the "Failed to parse source map from ..." errors in my ReactJS/TS project

Question

I have a ReactJS project where I wanted to use a Barcode-Scanner npm module with the name html5-qrcode, but I always get this error:

Failed to parse source map from 'C:\...\node_modules\html5-qrcode\third_party\index.js.map' file: Error: ENOENT: no such file or directory, open 'C:\...\node_modules\html5-qrcode\third_party\index.js.map'

And then there are errors like: (seperated for readability)

WARNING in ./node_modules/html5-qrcode/esm/camera/core-impl.js Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):

Failed to parse source map from 'C:\...\node_modules\src\camera\core-impl.ts' file: Error: ENOENT: no such file or directory, open 'C:\...\node_modules\src\camera\core-impl.ts'

I thought it might be an TS error, because every file of the second error part has a .ts ending. So I made a new ReactTS project with all components and co in it, but I still get the same error.

I thought it might be an TS error, because every file of the second error part has a .ts ending. So I made a new ReactTS project with all components and co in it, but I still get the same error.

Wendolynwendt

Answer 1

It seems like the npm package has issues with its source maps and webpacks's source-map-loader module is not able to process them. This doesn't really affect the application itself but having all those warnings is annoying.

I came across two solutions: either force the source-map-loader to skip the culprit package or ignore source-map warnings all together.

To achieve either solution, you'll need to be able to override the webpack.config.js. How to override it really depends on the framework you use to run your React apps (I have mine setup using NX)

Solution 1: Ignore source-mapping warnings (Easiest)

Add ignoreWarnings: [/Failed to parse source map/] to your webpack configuration. E.g.

const { merge } = require('webpack-merge');

module.exports = (config) => {
  return merge(config, {
    ignoreWarnings: [/Failed to parse source map/]
  });
};

Your webpack.config.js will look a lot different than this. The idea is to add (or override) ignoreWarnings with the pattern of the message it should ignore.

Solution 2: Skip source-map-loading for culprit package (Cleanest?)

const { merge } = require('webpack-merge');

module.exports = (config, context) => {
  return merge(config, {
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          use: [
            {
              loader: 'source-map-loader',
              options: {
                filterSourceMappingUrl: (url, resourcePath) => {
                  // @zxing has issues with its source maps
                  if (/@zxing/i.test(resourcePath)) {
                    return false;
                  }

                  return true;
                }
              }
            }
          ]
        }
      ]
    }
  });
};

The idea here is to override the source-map-loader rules and skip its execution if the current resource matches the regex. In my case, I want to skip any resource that contains @zxing.

I tried using hte exclude option but I had no luck with that and opted to use the filterSourceMappingUrl instead. Maybe it works for you though. Remember, the pathing has to be absolute so you might need to adapt the excluded pathings. More details here

const { merge } = require('webpack-merge');

module.exports = (config, context) => {
  return merge(config, {
    module: {
      rules: [
        {
          enforce: 'pre',
          test: /\.js$/,
          use: ['source-map-loader'],
          exclude:  ['/node_modules/@zxing']
        }
      ]
    }
  });
};

Hope this helps.

Cheers.

Cymar

Answer 2

1. add react-app-rewired to your project:

yarn add --dev react-app-rewired

or

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

2. modify your package.json with those lines:

    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",

3. create a file called config-overrides.js in project root (same folder as package.json) with this content:

module.exports = function override(config) {
  return {
    ...config,
    ignoreWarnings: [
      {
        module: /node_modules\/stylis-plugin-rtl/,
      },
    ],
  }
}

4. change "stylis-plugin-rtl" in config-overrides.js above to whichever name of library that has an invalid build and throwing errors.

5. source maps errors should no longer appear.

Farina