How to fix Warning: Failed to parse source map from '<path>' Error: ENOENT: no such file or directory in React

Create or update the .env file in your project root (next to package.json) and add the following line:

GENERATE_SOURCEMAP=false

This tells Create React App to skip generating source maps entirely. Restart your development server after adding this. Note that this will make debugging slightly harder as you won't see original source code in browser DevTools, but the warnings will disappear.

Install cross-env to ensure the environment variable works on all operating systems:

npm install --save-dev cross-env

Then update your package.json scripts:

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

This approach is particularly useful if you want to keep source maps enabled in production but disabled in development.

If you want to keep source maps enabled but hide the warnings, install CRACO (Create React App Configuration Override):

npm install @craco/craco

Create a craco.config.js file in your project root:

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

Update package.json scripts to use craco:

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

If you've ejected from Create React App and have direct access to webpack.config.js, add the ignoreWarnings configuration:

module.exports = {
  // ... other config
  ignoreWarnings: [
    {
      module: /node_modules/,
      message: /Failed to parse source map/,
    },
  ],
};

This filters out the specific warnings while keeping source maps functional for your own code.

If specific packages consistently cause warnings, check their GitHub issues page to see if it's a known problem. If not, open an issue with details:

- Package name and version
- The exact warning message
- Whether the .map file is included in node_modules/[package-name]/

Many maintainers are unaware their published packages have broken source map references. Your report can help fix it for everyone.

After implementing one of the solutions above:

1. Stop your development server (Ctrl+C)
2. Clear the build cache: rm -rf node_modules/.cache
3. Restart the development server: npm start
4. Check the browser console - warnings should be gone

If using GENERATE_SOURCEMAP=false, verify in DevTools that your code still appears readable (though it will be the transpiled version).