Fails if webpack.config.js uses top-level await

[s100]

Describe the bug

In Node.js 22.12.0+, if webpack.config.js is an ES module which makes use of top-level await, webpack-cli fails.

What is the current behavior?

Starting from Node.js 22.12.0, Node.js is now able to successfully require some ES modules, provided that the ES module being loaded does not use top-level await and nor do any of the modules it loads in turn. (This functionality has existed for some time behind a flag, but it is now enabled by default.) If the ES module being loaded does use top-level await, the require call throws a new ERR_REQUIRE_ASYNC_MODULE exception. webpack-cli does not catch this and so fails:

[webpack-cli] Failed to load 'C:\...\webpack.config.js' config
[webpack-cli] Error [ERR_REQUIRE_ASYNC_MODULE]: require() cannot be used on an ESM graph with top-level await. Use import() instead. To see where the top-level await comes from, use --experimental-print-required-tla.
    at ModuleJobSync.runSync (node:internal/modules/esm/module_job:392:13)
    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 Object..js (node:internal/modules/cjs/loader:1677:16)
    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) {
  code: 'ERR_REQUIRE_ASYNC_MODULE'
}

To Reproduce

package.json:

{
  "type": "module",
  "devDependencies": {
    "webpack-cli": "^5.1.4"
  }
}

webpack.config.js:

await undefined
export default {
  // ... any correct webpack config
}

Expected behavior

This webpack build should run to completion normally with any version of Node.js.

Screenshots

Please paste the results of npx webpack-cli info here, and mention other relevant information

  System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11850H @ 2.50GHz
    Memory: 12.98 GB / 31.71 GB
  Binaries:
    Node: 22.12.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (128.0.2739.54)
    Internet Explorer: 11.0.22621.3527
  Packages:
    webpack-cli: ^5.1.4 => 5.1.4

webpack-cli does already include code which is intended to handle the case where require(...) of the webpack.config.js fails, and fall back to import(...) instead:

webpack-cli/packages/webpack-cli/src/webpack-cli.ts

Lines 347 to 353 in 29e6e6b

	try {
	result = require(module);
	} catch (error) {
	const dynamicImportLoader: null | DynamicImport<T> =
	require("./utils/dynamic-import-loader")();
	if (
	((error as ImportLoaderError).code === "ERR_REQUIRE_ESM" ||

Up until now this was behaving correctly because ERR_REQUIRE_ESM was what was thrown in this case. As of Node.js 22.12.0, however, the error thrown is a previously unseen ERR_REQUIRE_ASYNC_MODULE, which does not get caught and handled in the same way and so continues to bubble up.

Additional context

In our case the top-level await was an fsPromises.readFile() call - we were able to eliminate this and use fs.readFileSync() instead as a workaround.