fix: allow require webpack.config.js in ESM format (#4346)

Author: alexander-akait

.eslintignore

@@ -10,4 +10,5 @@ test/**/index.js
 test/build/config/error-commonjs/syntax-error.js
 test/build/config/error-mjs/syntax-error.mjs
 test/build/config/error-array/webpack.config.js
+test/build/config-format/esm-require-await/webpack.config.js
 test/configtest/with-config-path/syntax-error.config.js

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

@@ -351,6 +351,7 @@ class WebpackCLI implements IWebpackCLI {
             require("./utils/dynamic-import-loader")();
           if (
             ((error as ImportLoaderError).code === "ERR_REQUIRE_ESM" ||
+              (error as ImportLoaderError).code === "ERR_REQUIRE_ASYNC_MODULE" ||
               process.env.WEBPACK_CLI_FORCE_LOAD_ESM_CONFIG) &&
             pathToFileURL &&
             dynamicImportLoader

test/build/config-format/babel-commonjs/babel-esm.test.js

@@ -5,8 +5,6 @@ describe("webpack cli", () => {
   it("should support mjs config format", async () => {
     const { exitCode, stderr, stdout } = await run(__dirname, ["-c", "webpack.config.babel.js"]);
 
-    console.log(stderr);
-
     expect(exitCode).toBe(0);
     expect(stderr).toBeFalsy();
     expect(stdout).toBeTruthy();

test/build/config-format/babel-esm/babel-esm.test.js

@@ -0,0 +1,18 @@
+const { run } = require("../../../utils/test-utils");
+
+describe("webpack cli", () => {
+  it("should support mjs config format using `require`", async () => {
+    const { exitCode, stdout } = await run(__dirname, ["-c", "webpack.config.js"]);
+
+    const [major, minor] = process.versions.node.split(".").map(Number);
+
+    if ((major >= 22 && minor >= 11) || major >= 23) {
+      expect(exitCode).toBe(0);
+      // stderr contains - Support for loading ES Module in require() is an experimental feature and might change at any time
+      // expect(stderr).toBeFalsy();
+      expect(stdout).toBeTruthy();
+    } else {
+      expect(exitCode).toBe(2);
+    }
+  });
+});

test/build/config-format/babel-esm/package.json

@@ -0,0 +1,13 @@
+import { fileURLToPath } from "url";
+import path from "path";
+
+const mode = await "development";
+
+export default {
+  mode,
+  entry: "./main.js",
+  output: {
+    path: path.resolve(path.dirname(fileURLToPath(import.meta.url)), "dist"),
+    filename: "foo.bundle.js",
+  },
+};

test/build/config-format/esm-require-await/index.test.js

@@ -0,0 +1,18 @@
+const { run } = require("../../../utils/test-utils");
+
+describe("webpack cli", () => {
+  it("should support mjs config format using `require`", async () => {
+    const { exitCode, stdout } = await run(__dirname, ["-c", "webpack.config.js"]);
+
+    const [major, minor] = process.versions.node.split(".").map(Number);
+
+    if ((major >= 22 && minor >= 11) || major >= 23) {
+      expect(exitCode).toBe(0);
+      // stderr contains - Support for loading ES Module in require() is an experimental feature and might change at any time
+      // expect(stderr).toBeFalsy();
+      expect(stdout).toBeTruthy();
+    } else {
+      expect(exitCode).toBe(2);
+    }
+  });
+});

…st/build/config-format/babel-esm/main.js …/config-format/esm-require-await/main.jstest/build/config-format/babel-esm/main.js renamed to test/build/config-format/esm-require-await/main.js test/build/config-format/babel-esm/main.js renamed to test/build/config-format/esm-require-await/main.js

@@ -0,0 +1 @@
+console.log("You know who");