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/scripts@27.6.0

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[bot]]

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[bot]]

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 object, not an array.

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.