Multiple entry points not working correctly

Our team has a config with the form:

{
  ...
  entry: {
    entry1: ['file1', 'file2'],
    entry2: ['file3', 'file4'],
  }
}

We were very excited to try out react-refresh-webpack-plugin, but unfortunately, could not get it working!

Through a process of trial and error, I removed entry2, and it started working. I think this is due to the logic in injectRefreshEntry, which would double-append react refresh into both entries. Is this intentional behavior?

Thanks! Mike

[sokra]

You can use multiple entry points on a single page, but make sure to use optimization.runtimeChunk: "single". This makes sure you only have a single runtime (with module cache) and modules are not instantiated twice.

Webpack will also add the ability to create entry points that are children of other entries with dependOn.

Anyway: Use a single webpack runtime per html page.

[davecoates]

In case anyone is looking for a workaround for multiple entry points this worked for me:

    const BaseReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
    class ReactRefreshWebpackPlugin extends BaseReactRefreshWebpackPlugin {
        apply(compiler) {
            super.apply(compiler);
            if (compiler.options.entry.djangoStyles) {
                // Remove all the hot module related packages from djangoStyles entry point.
                // Without this HMR breaks with error `Uncaught Error: Iframe has not been created yet.`
                // This came from react-error-overlay but this issue is likely related:
                // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/88
                // There's no option to disable it directly
                const excludeEntries = [
                    '@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js',
                    '@alliance-software/webpack-dev-utils/client/hot-client-errors.js',
                    'webpack/hot/dev-server.js',
                ];
                compiler.options.entry.djangoStyles = compiler.options.entry.djangoStyles.filter(
                    path => excludeEntries.filter(p => path.endsWith(p)).length === 0
                );
            }
        }
    }