Support ESM mix config

bin/cli.js

@@ -67,7 +67,7 @@ async function executeScript(cmd, opts, args = []) {
     // containg spaces on Windows (yarn does)
     const configPath = path.relative(
         process.cwd(),
-        require.resolve('../setup/webpack.config.js')
+        require.resolve('../setup/webpack.config.mjs')
     );
 
     const script = [
@@ -77,6 +77,10 @@ async function executeScript(cmd, opts, args = []) {
     ].join(' ');
 
     const scriptEnv = {
+        // Allow dynamic ESM imports
+        // This is an unfortunate workaround but it's the simplest way
+        // to get dynamic ESM imports & webpack-cli to play together
+        DISABLE_V8_COMPILE_CACHE: '1',
         NODE_ENV: env,
         MIX_FILE: opts.mixConfig
     };

setup/webpack.config.js

@@ -1,20 +1,10 @@
 const { assertSupportedNodeVersion } = require('../src/Engine');
 const Mix = require("../src/Mix")
 
-module.exports = async () => {
+module.exports = () => {
     assertSupportedNodeVersion();
 
-    const mix = Mix.primary;
+    const config = await import('./webpack.config.mjs');
 
-    // Load the user's mix config
-    await mix.load();
-
-    // Install any missing dependencies
-    await mix.installDependencies();
-
-    // Start running
-    await mix.init();
-
-    // Turn everything into a config
-    return await mix.build();
+    return await config.default();
 };

setup/webpack.config.mjs

@@ -0,0 +1,17 @@
+import Mix from '../src/Mix';
+
+export default async function () {
+    const mix = Mix.primary;
+
+    // Load the user's mix config
+    await mix.load();
+
+    // Install any missing dependencies
+    await mix.installDependencies();
+
+    // Start running
+    await mix.init();
+
+    // Turn everything into a config
+    return await mix.build();
+}

src/Mix.js

@@ -82,9 +82,11 @@ class Mix {
      */
     async load() {
         // 1. Pull in the user's mix config file
-        const mod = require(this.paths.mix())
+        // An ESM import here allows a user's mix config
+        // to be an ESM module and use top-level await
+        const mod = await import(this.paths.mix());
 
-        // Allow the user to export a default `function (mix) { … }` from their config file
+        // Allow the user to `export default function (mix) { … }` from their config file
         if (typeof mod.default === 'function') {
             await mod.default(this.api)
         }

src/Paths.js

@@ -46,11 +46,15 @@ class Paths {
         if (process.env.MIX_FILE) {
             return [
                 process.env.MIX_FILE,
+                `${process.env.MIX_FILE}.mjs`,
+                `${process.env.MIX_FILE}.cjs`,
                 `${process.env.MIX_FILE}.js`,
             ]
         }
 
         return [
+            "webpack.mix.mjs",
+            "webpack.mix.cjs",
             "webpack.mix.js",
         ]
     }