wp-scripts: using --experimental-modules causes TypeError: config.plugins is not iterable when webpack.config.js is extending plugins.

[nextgenthemes]

Description

Reduced webpack.config.js. Works perfectly fine without --experimental-modules

const WebpackNotifierPlugin = require( 'webpack-notifier' );
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

const config = defaultConfig;

config.plugins = [ ...config.plugins, new WebpackNotifierPlugin( { onlyOnError: true } ) ];

module.exports = config;

commandline:

wp-scripts build --experimental-modules --webpack-copy-php --webpack-src-dir=plugins/nextgenthemes-blocks/src --output-path=plugins/nextgenthemes-blocks/build

[webpack-cli] Failed to load '/u/websites/webpack.config.js' config
[webpack-cli] TypeError: config.plugins is not iterable
    at Object.<anonymous> (/u/websites/webpack.config.js:6:30)
    at Module._compile (node:internal/modules/cjs/loader:1368:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at Module.require (node:internal/modules/cjs/loader:1230:19)
    at require (node:internal/modules/helpers:179:18)
    at WebpackCLI.tryRequireThenImport (/u/websites/node_modules/webpack-cli/lib/webpack-cli.js:223:30)
    at loadConfigByPath (/u/websites/node_modules/webpack-cli/lib/webpack-cli.js:1406:38)
    at WebpackCLI.loadConfig (/u/websites/node_modules/webpack-cli/lib/webpack-cli.js:1515:44)

Step-by-step reproduction instructions

1. use webpack.config.js to extend plugins
2. run wp-scripts

Screenshots, screen recording, code snippet

No response

Environment info

@wordpress/[email protected]

node -v
v21.7.2

npm -v
10.5.0

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

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[nextgenthemes]

yes

[github-actions]

Hi,
This issue has gone 30 days without any activity. This means it is time for a check-in to make sure it is still relevant. If you are still experiencing this issue with the latest versions, you can help the project by responding to confirm the problem and by providing any updated reproduction steps.
Thanks for helping out.

[nextgenthemes]

yes

[TheAggressive]

Also recieving this error. Any help or did you resolve this?

[t-hamano]

I'm not sure of the exact cause, but it seems that when the --experimental-modules flag is enabled, this problem occurs because the defaultConfig is an array, not an object.

Therefore, I overwrote the settings for each element of the array as shown below, and the error no longer appeared:

const WebpackNotifierPlugin = require( 'webpack-notifier' );
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

const config = defaultConfig.map( ( config ) => {
	return {
		...config,
		plugins: [ ...config.plugins, new WebpackNotifierPlugin( { onlyOnError: true } ) ],
	};
});

module.exports = config;

I hope this helps.

[gziolo]

Yes, @t-hamano is correct. Currently there need to be two configs to support ES Modules. That’s why it’s behind the experimental flag and subject to change in the future.

[nextgenthemes]

@t-hamano Why did you incorrectly add "Help Request" and removed "Bug" from this? It's a bug, and it should behave the exact same way as without the flag and output an array as the default config.

@gziolo how is this "completed"?

I do not understand why you close this. And I really do not feel like trial and erroring this.

"Currently there need to be two configs to support ES Modules." What does this actually mean?

So I need to write some custom code into my config that detects if the --experimental-modules flag is used and extend the plugins as an object and otherwise as an array? Or will be treating this as an object work in both cases? The default and correct way seems to be that it's supposed to be an array. Why not actually FIX it or leave it open?

The way I see it, nothing is "completed" here, no commit is referenced. Just some "subject to change" bs. Leave it open then until it actually is fixed.

Seems to me, it should pretty simple to make make it an array.

[t-hamano]

I don't think this issue is a bug.

If you want to know why the default config becomes an array when --experimantal-modules is enabled and why an array was used, see #57461.

If the default config is unified into an array, I think that developers who have already extended the default config in webpack.config.js will no longer have their custom config work if they update their @wordpress/scripts package.