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

ReactBEGINNERLOWUpdated Dec 8, 2025· 182 views

This warning appears when React's build process cannot parse source map files from third-party dependencies. It commonly occurs after upgrading Create React App or when using packages that reference missing source map files.

Quick fix

Fixes Warning: Failed to parse source map from '<path>' Error: ENOENT: no such file or directory

GENERATE_SOURCEMAP=false
  1. Disable source map generation in development
  2. Set environment variable using cross-env for cross-platform support
  3. Configure Webpack to ignore source map warnings using CRACO
  4. Modify webpack.config.js directly (for ejected apps)
react — error
GENERATE_SOURCEMAP=false
Warning: Failed to parse source map from '<path>' Error: ENOENT: no such file or directory

What this error means

Source maps are files that map minified/transpiled production code back to the original source code, enabling developers to debug in their browser's DevTools using the original code structure. This warning occurs when Webpack's source-map-loader attempts to load a source map file referenced by a third-party package, but the file either doesn't exist, is malformed, or points to an invalid path. The error is particularly common in Create React App 5.0+ projects because of stricter source map validation in Webpack 5. Many npm packages include source map references in their distributed files but don't actually include the .map files in the published package, or they reference internal src directories that aren't included in the distribution. While this is classified as a warning (not an error), it appears in the browser console during development and can clutter your debugging output. The application will still function normally since source maps are only used for debugging, not runtime execution.

Typical symptoms

  • Browser console shows "Failed to parse source map" warnings during development
  • Warnings reference node_modules packages with paths ending in .map files
  • Multiple warnings appear after upgrading Create React App to version 5.0+
  • Error messages include "ENOENT: no such file or directory" for .map files
  • DevTools console is cluttered with yellow warning messages on page load
  • Warnings mention packages like @babel, react-dom, or other third-party libraries
  • Application runs normally despite the warnings appearing

Common causes

  1. Third-party npm packages reference source maps in their code but don't include the .map files in the published package
  2. Packages point to internal /src directories in their source map references that aren't included in distribution
  3. Webpack 5's stricter source map validation in Create React App 5.0+ exposes previously ignored issues
  4. Source map files exist but are malformed or have incorrect JSON syntax
  5. Incorrect file paths in source map URL comments within package files
  6. Missing source map files after package updates or dependency changes
  7. Build tools generated invalid source map references during the package's build process
  8. Relative paths in source maps don't resolve correctly within node_modules structure

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

1Disable source map generation in development

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

bash
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.

2Set environment variable using cross-env for cross-platform support

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

bash
npm install --save-dev cross-env

Then update your package.json scripts:

json
"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.

3Configure Webpack to ignore source map warnings using CRACO

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

bash
npm install @craco/craco

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

javascript
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:

json
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}
4Modify webpack.config.js directly (for ejected apps)

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

javascript
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.

5Report the issue to package maintainers

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.

6Verify the fix worked

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).

Advanced notes

Production builds: This warning only affects development. Production builds (npm run build) typically have source maps disabled by default unless you explicitly enable them, so this issue won't affect deployed applications.

Debugging trade-offs: Disabling source maps entirely (GENERATE_SOURCEMAP=false) makes debugging harder because you'll see transpiled code in DevTools instead of your original JSX/TypeScript. The CRACO approach (ignoring warnings) is better if you need accurate debugging.

Next.js users: If using Next.js instead of Create React App, add this to next.config.js:

javascript
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.ignoreWarnings = [
        { module: /node_modules/, message: /Failed to parse source map/ }
      ];
    }
    return config;
  }
};

Vite users: For Vite projects, add to vite.config.js:

javascript
export default {
  build: {
    sourcemap: false
  }
};

Identifying problematic packages: Check the full warning message in your console - it will show the exact package path. Common offenders include @babel packages, older versions of react-dom, and date/time pickers. Consider updating these packages to newer versions that may have fixed the issue.

Browser DevTools settings: As a quick workaround without code changes, you can filter out these warnings in Chrome DevTools by clicking the filter icon and adding a negative filter: -Failed to parse source map. This hides the warnings without changing your build configuration.

Frequently asked questions

What does "Warning: Failed to parse source map from '<path>' Error: ENOENT: no su" mean?
Source maps are files that map minified/transpiled production code back to the original source code, enabling developers to debug in their browser's DevTools using the original code structure. This warning occurs when Webpack's source-map-loader attempts to load a source map file referenced by a third-party package, but the file either doesn't exist, is malformed, or points to an invalid path. 0+ projects because of stricter source map validation in Webpack 5.
How do I fix "Warning: Failed to parse source map from '<path>' Error: ENOENT: no su"?
This warning appears when React's build process cannot parse source map files from third-party dependencies. It commonly occurs after upgrading Create React App or when using packages that reference missing source map files.
What causes "Warning: Failed to parse source map from '<path>' Error: ENOENT: no su"?
Third-party npm packages reference source maps in their code but don't include the .map files in the published package Packages point to internal /src directories in their source map references that aren't included in distribution Webpack 5's stricter source map validation in Create React App 5.0+ exposes previously ignored issues
Is the "Warning: Failed to parse source map from '<path>' Error: ENOENT: no su" error serious?
It is a low-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading