"ReferenceError: exports is not defined" after update to Node 22.12 from Node 22.11

Question

After I upgraded our project from Node 22.11 to Node 22.12, I am unable to build and run the project using webpack. Problem is caused by Node 22.12 and its newly introduced functionality require(esm) is now enabled by default.

Temporarily, problem can be fixed by:

1. Staying at Node version 22.11
2. Running Node 22.12 with flag --no-experimental-require-module (e.g. NODE_OPTIONS="--no-experimental-require-module" npm run build)

Both prevents Node from using this new feature.

However, without those temporary solutions with Node 22.12, webpack fails with following error:

[webpack-cli] Failed to load '/<path>/<project_name>/webpack.config.babel.js' config
[webpack-cli] ReferenceError: exports is not defined
    at file:///<path>/<project_name>/webpack.config.babel.js:3:23
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:395:35)
    at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:329:47)
    at loadESMFromCJS (node:internal/modules/cjs/loader:1414:24)
    at Module._compile (node:internal/modules/cjs/loader:1547:5)
    at Module._compile (/<path>/<project_name>/node_modules/pirates/lib/index.js:117:24)
    at node:internal/modules/cjs/loader:1677:16
    at Object.newLoader [as .js] (/<path>/<project_name>/node_modules/pirates/lib/index.js:121:7)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
    at Module.require (node:internal/modules/cjs/loader:1340:12)
    at require (node:internal/modules/helpers:138:16)
    at WebpackCLI.tryRequireThenImport (/<path>/<project_name>/node_modules/webpack-cli/lib/webpack-cli.js:223:30)
    at loadConfigByPath (/<path>/<project_name>/node_modules/webpack-cli/lib/webpack-cli.js:1406:38)
    at WebpackCLI.loadConfig (/<path>/<project_name>/node_modules/webpack-cli/lib/webpack-cli.js:1515:44)
    at WebpackCLI.createCompiler (/<path>/<project_name>/node_modules/webpack-cli/lib/webpack-cli.js:1781:33)
    at WebpackCLI.runWebpack (/<path>/<project_name>/node_modules/webpack-cli/lib/webpack-cli.js:1877:31)
    at Command.<anonymous> (/<path>/<project_name>/node_modules/webpack-cli/lib/webpack-cli.js:944:32)
    at Command.listener [as _actionHandler] (/<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:482:17)
    at /<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:1283:65
    at Command._chainOrCall (/<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:1177:12)
    at Command._parseCommand (/<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:1283:27)
    at /<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:1081:27
    at Command._chainOrCall (/<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:1177:12)
    at Command._dispatchSubcommand (/<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:1077:23)
    at Command._parseCommand (/<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:1248:19)
    at Command.parseAsync (/<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:935:16)
    at Command.<anonymous> (/<path>/<project_name>/node_modules/webpack-cli/lib/webpack-cli.js:1356:32)
    at Command.parseAsync (/<path>/<project_name>/node_modules/webpack-cli/node_modules/commander/lib/command.js:935:5)
    at WebpackCLI.run (/<path>/<project_name>/node_modules/webpack-cli/lib/webpack-cli.js:1360:9)
    at runCLI (/<path>/<project_name>/node_modules/webpack-cli/lib/bootstrap.js:9:9)

Webpack is unable to import anything after update to Node 22.12. I've tried everything that came up to my mind (e.g. change to require and module.exports), but nothing helped. Any idea?

File package.json

"type": "module"

File webpack.config.babel.js

import fs from 'fs';
import path from 'path';
import dotenv from 'dotenv';
import CopyPlugin from 'copy-webpack-plugin';
import CspHtmlWebpackPlugin from 'csp-html-webpack-plugin';
import HtmlPlugin from 'html-webpack-plugin';
import StyleLintPlugin from 'stylelint-webpack-plugin';
import { SubresourceIntegrityPlugin } from 'webpack-subresource-integrity';
import VisualizerPlugin from 'webpack-visualizer-plugin2';
import { fileURLToPath } from 'url';
import {
  WS_PATH,
  WS_PORT,
  DEV_API_PATHS,
  DEV_API_PORT,
} from './mockApi/server/constants.js';
import webpack from 'webpack';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default (env, argv) => {
  // ...
}

File tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

File babel.config.js

export default {
  presets: [
    [
      '@babel/preset-env',
      {
        corejs: 3,
        useBuiltIns: 'usage',
      },
    ],
    '@babel/preset-react',
    '@babel/preset-typescript',
  ],
};

Versions:

name	version
node	22.12.0
npm	11.0.0
webpack	5.95.0
webpack-dev-server	5.1.0
typescript	5.6.3

Answer 1

Ensure that all plugins and loaders used in your webpack configuration are up-to-date and compatible with Webpack 5 and Node.js 22.12. try:

npm outdated
npm update