Failed to parse source map from X error in React [Solved]

# Table of Contents

# Failed to parse source map from X error in React [Solved]

The warning "Failed to parse source map from X" is shown when you try to start or build a React application and the source map generation fails.

To resolve the issue, set the GENERATE_SOURCEMAP environment variable to false in your .env file.

Here is the complete stack trace.

shell

Copied!
Failed to parse source map from 'path'
Error: ENOENT: no such file or directory, open 'path'

The message is just a warning and wouldn't fail your CI builds, however, you can resolve the issue by setting an environment variable.

Note: if you got the error in your Chrome developer tools and not in a React.js application, check out the following article.

# Set the `GENERATE_SOURCEMAP` environment variable to `false`

The first thing you should try is to set the GENERATE_SOURCEMAP environment variable to false.

When the environment variable is set to false, source maps are not generated for a production build. This can also resolve out-of-memory issues on smaller machines.

Create a .env file in the root directory of your project (right next to your package.json file).

shell

Copied!
your-project/
  └── .env
  └── package.json
  └── src/
  └── public/

Set the GENERATE_SOURCEMAP environment variable to false in your .env file.

.env

Copied!
GENERATE_SOURCEMAP=false

set generate sourcemap environment variable to false

Try to restart or rebuild your React.js application after making the change and the error should be resolved.

shell

Copied!
# If you need to rebuild
npm run build

# If you need to start your React app
npm start

You can also use the cross-env package to set the GENERATE_SOURCEMAP environment variable to false.

Install the package by running one of the following commands.

shell

Copied!
# with NPM
npm install --save-dev cross-env

# with YARN
yarn add cross-env --dev

Now, open your package.json file and update your start and build commands to look as follows.

package.json

Copied!
{
  "scripts": {
    "start": "cross-env GENERATE_SOURCEMAP=false react-scripts start",
    "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build",
  }
}

set generate sourcemap environment variable false in package json

The cross-env package is used to universally set an environment variable in a way that works on both Windows, Linux and macOS.

The next time you issue the npm start or npm run build commands, the GENERATE_SOURCEMAP environment variable will be set to false right before the command is run.

You can also use the cross-env package when issuing the command from your terminal.

shell

Copied!
# To start your server
npx cross-env GENERATE_SOURCEMAP=false npm start

# To build your application
npx cross-env GENERATE_SOURCEMAP=false npm run build

Alternatively, you can use your operating system's native way of setting the environment variable before issuing the npm start or npm run build command.

If you are on Windows, run the following command in CMD.

cmd

Copied!
# On Windows, CMD
SET GENERATE_SOURCEMAP=false

If you are on Windows and use PowerShell, run the following command.

PowerShell

Copied!
# On Windows, PowerShell
$env:GENERATE_SOURCEMAP="false"

If you are on macOS or Linux, run the following command in bash or zsh.

shell

Copied!
export GENERATE_SOURCEMAP=false

Note that the "Failed to parse source map from X" message is just a warning and wouldn't fail your CI builds.

Some of the third-party packages that you are using (as shown in the warning message) point to an src directory that is not included in the package.

So you can either disable generating source maps or add the src folder at the location specified by the warning message.

In other words, the package has to include its source code for source maps to work.

Source maps are files that enable you to get better and more understandable error messages after bundling your code for production (even after your code is minified and optimized).

Note: if you got the error in your Chrome developer tools and not in a React.js application, check out the following article.

# Resolving the issue when using craco

If you use craco to manage your React config, you can disable the warnings directly in your craco.config.js file.

craco.config.js

Copied!
module.exports = {
  webpack: {
    configure: {
      ignoreWarnings: [
        function ignoreSourcemapsloaderWarnings(warning) {
          return (
            warning.module &&
            warning.module.resource.includes("node_modules") &&
            warning.details &&
            warning.details.includes("source-map-loader")
          );
        },
      ],
    },
  },
};

After you disable the source-map-loader warnings as shown above, the issue should be resolved.

# Disabling the warning directly in your `webpack.config.js`

If you have access to your webpack.config.js file, you can disable the source map warnings by using the ignoreWarnings key.

webpack.config.js

Copied!
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        enforce: "pre",
        use: ["source-map-loader"],
      },
    ],
  },
  ignoreWarnings: [/Failed to parse source map/],
};

The ignoreWarnings key tells Webpack to ignore specific warnings.

The example ignores the warnings that contain the text "Failed to parse source map".

If that didn't work, you can also try to exclude the node_modules directory for the source-map-loader rule.

webpack.config.js

Copied!
module.exports = {
  module: {
    rules: [
      {
          test: [/\.js?$/, /\.ts?$/, /\.jsx?$/, /\.tsx?$/],
          enforce: 'pre',
          exclude: /node_modules/,
          use: ['source-map-loader'],
      },
    ],
  },
};

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Failed to parse source map from X error in React [Solved]

# Table of Contents