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

// Before (CommonJS)
const fetch = require('node-fetch');

// After (Dynamic Import)
const fetch = async () => {
  const module = await import('node-fetch');
  return module.default;
};

// Usage
async function getData() {
  const fetchModule = await import('node-fetch');
  const response = await fetchModule.default('https://api.example.com');
  return response.json();
}

{
  "type": "module"
}

// Before (CommonJS)
const React = require('react');
const Component = require('./Component');
module.exports = MyComponent;

// After (ES Modules)
import React from 'react';
import Component from './Component.js';
export default MyComponent;

# Example: node-fetch v2 is CommonJS, v3 is ESM-only
npm install [email protected]

# Example: chalk v4 is CommonJS, v5 is ESM-only
npm install [email protected]

# Rename files
mv webpack.config.js webpack.config.cjs
mv jest.config.js jest.config.cjs

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

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { modules: 'auto' }],
              '@babel/preset-react'
            ]
          }
        }
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.jsx', '.mjs', '.cjs']
  }
};

module.exports = {
  webpack: (config) => {
    config.resolve.extensionAlias = {
      '.js': ['.ts', '.tsx', '.js', '.jsx', '.mjs']
    };
    return config;
  }
};