Node 22.12升级后Webpack构建报错：ReferenceError: exports is not defined

将项目从Node 22.11升级到22.12后，Webpack无法正常构建和运行项目。问题根源在于Node 22.12默认启用了require(esm)特性。

临时解决方案 #

• 停留在Node 22.11版本
• 使用--no-experimental-require-module参数启动Node 22.12，示例命令：NODE_OPTIONS="--no-experimental-require-module" npm run build
  以上两种方式均可阻止Node启用该新特性。

未用临时方案时的报错信息 #

[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无法导入任何内容，尝试过改为require和module.exports等方法均无效，求永久解决方案。

相关配置文件 #

package.json #

"type": "module"

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) => {
  // ...
}

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"
  ]
}

babel.config.js #

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

版本信息 #

内容的提问来源于stack exchange，提问作者Bedřich Schindler