How to fix Error [ERR_REQUIRE_ESM]: require() of ES Module not supported in React

Wrap the ESM dependency in a helper that uses import(), which works from CommonJS:

// fetch-wrapper.cjs
const fetch = (...args) =>
  import('node-fetch').then(({ default: fetch }) => fetch(...args));

module.exports = { fetch };

// usage
const { fetch } = require('./fetch-wrapper.cjs');
fetch(url).then((result) => result.json());

Node-fetch 3+ dropped CommonJS in favor of ES modules, so require('node-fetch') now throws ERR_REQUIRE_ESM. Use this wrapper to keep the rest of your code CommonJS while loading the module asynchronously.

If your React project can move to ESM, update package.json:

{
  "type": "module"
}

Then replace require() with import/ export and include extensions on relative imports:

import React from 'react';
import App from './App.js';
export default App;

Update build scripts (Webpack, Babel, jest) to handle .js/.jsx/.mjs/.cjs and enable module: "ES2020", moduleResolution: "node" in tsconfig. Next.js and CRA also support ESM entry files for API routes once they export with export default.

Temporarily downgrade the dependency until you can migrate tooling:

npm install [email protected]
npm install [email protected]
# or, with yarn:
# yarn add node-fetch@^2.6.7 strip-ansi@^6.0.1

Node-fetch v2 and strip-ansi v6 are still CommonJS. Use overrides or Yarn resolutions if the package is pulled in transitively:

{
  "overrides": {
    "strip-ansi": "6.0.1"
  }
}

This lets the build succeed while you plan a permanent fix.

If the project uses "type": "module" but builds still require CommonJS configs (Webpack, Jest), rename them to .cjs:

mv webpack.config.js webpack.config.cjs
mv jest.config.js jest.config.cjs

Then update your package.json scripts:

{
  "scripts": {
    "build": "webpack --config webpack.config.cjs"
  }
}

Files ending with .cjs are always interpreted as CommonJS, letting tooling still call require() without hitting ERR_REQUIRE_ESM.

Configure Webpack or Vite to handle .mjs and conditional exports so it can load ESM packages cleanly:

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.mjs', '.cjs'],
    conditionNames: ['require', 'import', 'default']
  }
};

If a package.json exposes both import and require entry points, the bundler must pick the right one. Webpack 5 and Vite do this automatically if you include .mjs in resolve extensions and avoid forcing mainFields to CommonJS-only entries.