Invalid configuration object error when using --experimental-modules

[mizan42047]

Description

Without --experimental-modules, the configuration below runs fine:

const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');
const path = require('path');

module.exports = {
    ...defaultConfig,
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src/'),
        },
    },
};

However, when I added the --experimental-modules flag to my package.json like this:
"start": "wp-scripts start --experimental-modules"
I got the following error:

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property '1'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, extends?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
   -> Options object as provided by the user.
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated, one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           1: …
         }
       })
     ]

Step-by-step reproduction instructions

1. Create a plugin with npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template.
2. Add a file named webpack.config.js.
3. Then, try to extend the @wordpress/scripts configuration like this:

const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');
const path = require('path');
module.exports = {
    ...defaultConfig,
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'src/'),
        },
    },
};

Screenshots, screen recording, code snippet

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[rafaucau]

When using --experimental-modules, the config returns an array of two objects:

gutenberg/packages/scripts/config/webpack.config.js

Line 476 in 82e7b7a

module.exports = [ scriptConfig, moduleConfig ];

To handle this, you can extend both configs:

const wordpressConfig = require('@wordpress/scripts/config/webpack.config');

function extendSharedConfig(config) {
	return {
		...config,
		// Add shared config extensions here...
	};
}

function extendScriptConfig(config) {
	return {
		...config,
		// Add non-module config extensions here...
	};
}

module.exports = (() => {
	if (Array.isArray(wordpressConfig)) {
		const [scriptConfig, moduleConfig] = wordpressConfig;

		const extendedScriptConfig = extendSharedConfig(extendScriptConfig(scriptConfig));
		const extendedModuleConfig = extendSharedConfig(moduleConfig);

		return [extendedScriptConfig, extendedModuleConfig];
	} else {
		return extendSharedConfig(extendScriptConfig(wordpressConfig));
	}
})();

[mizan42047]

When using --experimental-modules, the config returns an array of two objects:

gutenberg/packages/scripts/config/webpack.config.js

Line 476 in 82e7b7a

module.exports = [ scriptConfig, moduleConfig ];

To handle this, you can extend both configs:

const wordpressConfig = require('@wordpress/scripts/config/webpack.config');

function extendSharedConfig(config) {
	return {
		...config,
		// Add shared config extensions here...
	};
}

function extendScriptConfig(config) {
	return {
		...config,
		// Add non-module config extensions here...
	};
}

module.exports = (() => {
	if (Array.isArray(wordpressConfig)) {
		const [scriptConfig, moduleConfig] = wordpressConfig;

		const extendedScriptConfig = extendSharedConfig(extendScriptConfig(scriptConfig));
		const extendedModuleConfig = extendSharedConfig(moduleConfig);

		return [extendedScriptConfig, extendedModuleConfig];
	} else {
		return extendSharedConfig(extendScriptConfig(wordpressConfig));
	}
})();

Yeah, it works. Thank you so much @rafaucau

[TheAggressive]

@mizan42047 could you post your final webpack.config.js for reference how it turned out?

Thanks!