Feature Request: Interactivity API Support

[james0r]

Just curious if theres a recommended way to set up blocks using the Interactivity API with block-theme.

Looks like with the current @wordpress/wp-scripts version we need to add the --experimental-modules flag, but using this flag breaks the provided WebPack config overrides.

Error thrown for

var config = {
    ...defaultConfig,
    entry: {
        ...defaultConfig.entry(), // not a function
                ...
        }
}

[webpack-cli] TypeError: defaultConfig.entry is not a function
    at Object.<anonymous> (/Users/x/Projects/Wordpress/blocks-2/wp-content/themes/block-theme/bin/webpack.config.js:17:20)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at Module.require (node:internal/modules/cjs/loader:1115:19)
    at require (node:internal/modules/helpers:130:18)
    at WebpackCLI.tryRequireThenImport (/Users/jamesauble/Projects/Wordpress/blocks-2/wp-content/themes/block-theme/node_modules/webpack-cli/lib/webpack-cli.js:223:30)
    at loadConfigByPath (/Users/jamesauble/Projects/Wordpress/blocks-2/wp-content/themes/block-theme/node_modules/webpack-cli/lib/webpack-cli.js:1406:38)
    at /Users/jamesauble/Projects/Wordpress/blocks-2/wp-content/themes/block-theme/node_modules/webpack-cli/lib/webpack-cli.js:1460:88

[bacoords]

At this point - the --experimental-modules flag does not support using a custom webpack config file. If you want to use the Interactivity API, you'll need to build those blocks in a separate plugin.

Even if there could be a way to modify our custom webpack config to work with it, it's still an 'experimental' feature, so I'm waiting to see what core is going to do about it first before adapting any code.

[rabindratharu]

@james0r Could you please try the below code. https://github.com/rabindratharu/boilerplate/blob/experimental/webpack.config.js

const { getWebpackEntryPoints } = require('@wordpress/scripts/utils/config');

// External dependencies
const path = require( 'path' );
const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

// JS Directory path.
const SRC_DIR   = path.resolve( __dirname, 'src' );

const entry = {
    ...getWebpackEntryPoints('script')(),
    public: SRC_DIR + '/public/index.js'
};

const isProduction = process.env.NODE_ENV === 'production';

module.exports = [
    {
    ...scriptConfig,
    entry: entry,
    module: {
        ...scriptConfig.module,
        rules: [
            ...scriptConfig.module.rules,
        ],
    },
    optimization: {
        minimize: isProduction,
        minimizer: [
            '...',
            new CssMinimizerPlugin()
        ]
    },
    plugins: [
        ...scriptConfig.plugins,
        new RemoveEmptyScriptsPlugin(),
    ],
    },
    moduleConfig,
];