Uncaught TypeError: __webpack_require__.r is not a function

Question

I have a multi-entry application in which multiple entries are loaded in one web page. Here I get the following error "Uncaught TypeError: webpack_require.r is not a function". I analysed the webpack build outputs and come to the following conclusion.

Entry A and B both require module C. The outputs of A and B are both loaded in one page. For entry B, webpack creates a seperate chunk for C that also contains some other modules. But for B, webpack includes C in the same file as the output of B. When calling module C from B, however it is using the seperate chunk file instead of the module included in the output file of B.

Now the problem is that module C from the seperate chunk is calling

__webpack_require__.r(__webpack_exports__);

while module C which is included in the output file of B does not. And within the context of B webpack somehow doesn't define r.

I see 2 problems here.

1. Why is webpack using module C from the seperate chunk instead of the output of file B?
2. Why is r not defined in the output of file B?

According to webpack comments r is "define __esModule on exports". Can I somehow enforce r to be defined for a given entry as that would probably solve this bug?

I'm using webpack 5.28.0

const AssetsPlugin = require('assets-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const path = require('path');
const packageJson = require("./package.json");

module.exports = {
    entry: {
        'account': './src/apps/account/account.js',
        'admin-dashboard': './src/apps/admin/dashboard.js',
        'admin-statistics': './src/apps/admin/statistics.js',
        'conflicts': './src/apps/conflicts.js',
        'create-useraccount': './src/apps/account/free/create-useraccount.js',
        'confirm-temporary-useraccount': './src/apps/account/free/confirm-temporary-useraccount.js',
        'confirm-useraccount': './src/apps/account/free/confirm-useraccount.js',
        'login': './src/apps/account/login.js',
        'project-issues': './src/apps/project-issues.js',
        'project': './src/apps/project.js',
        'my-settings': './src/apps/my-settings.js',
        'my-space': './src/apps/my-space.js',
        'model': './src/apps/model.js',
        'ifc-property-lists': './src/apps/ifc-property-lists.js',
        'settings': './src/apps/settings.js'
    },
    output: {
        assetModuleFilename: "[name].[contenthash][ext][query]",
        chunkFilename: "[name].[contenthash].js",
        filename: "[name].[contenthash].js",
        publicPath: '/webapp/dist/',
        clean: true
    },
    optimization: {
        minimize: true,
        minimizer: [
            `...`,
            new CssMinimizerPlugin(),
        ],
        splitChunks: {
            chunks: 'all'
        },
        usedExports: true
    },
    mode: 'production',
    module: {
        rules: [
            {
                test: require.resolve("jquery"),
                loader: "expose-loader",
                options: {
                    exposes: [{
                        globalName: "$",
                        override: true
                    }, {
                        globalName: "jQuery",
                        override: true
                    }]
                }
            }, {
                test: /\.vue$/,
                loader: 'vue-loader'
            }, {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    }, {
                        loader: 'resolve-url-loader',
                        options: {
                            removeCR: true
                        }
                    }, {
                        loader: 'less-loader'
                    }
                ]
            }, {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader, {
                        loader: 'css-loader'
                    }, {
                        loader: 'resolve-url-loader',
                        options: {
                            removeCR: true
                        }
                    }, {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            sassOptions: {
                                includePaths: [
                                    path.resolve(__dirname, "./node_modules/@syncfusion")
                                ]
                            }
                        }
                    }]
            }, {
                test: /\.js$/,
                exclude: [/assets/, /node_modules\\(?!@bimcollab)/],
                loader: 'babel-loader'
            }, {
                test: /\.(png|jpg|gif|woff(2)?)$/,
                type: 'asset'
            }]
    },
    plugins: [
        new AssetsPlugin({ // Creates 'webpack-assets.json' file with all asset paths
            prettyPrint: true,
            entrypoints: true
        }),
        new BundleAnalyzerPlugin({
            analyzerMode: "static",
            openAnalyzer: false
        }),
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            chunkFilename: "[name].[contenthash].css",
            filename: "[name].[contenthash].css"
        }),
        new webpack.DefinePlugin({
            "process.env": JSON.stringify(process.env)
        })
    ],
    resolve: {
        alias: {
            '@src': path.resolve(__dirname, 'src/'),
            '@assets': path.resolve(__dirname, 'assets/'),
        }
    }
};

console.log(packageJson.version);

Answer 1

I found a solution for this problem. As said, the real problem here is that for entry B webpack puts the code for module C into the output file of B, while at runtime it is trying to access module C from its seperate chunk file (that was created by webpack for entry A).

Now, if I enforce webpack to always put module C into a seperate chunk it solves the problem. In that case, webpack creates only one file for module C so during runtime it will always use the single right file. To do so I used cacheGroups. In the case below, the problem was in BootstrapVue, but I've also seen other modules that were giving the same problem.

splitChunks: {
   chunks: 'all',
   cacheGroups: {
      bootstrapVue: {
         test: /[\\/]node_modules[\\/]bootstrap-vue[\\/]/,
         name: 'bootstrap-vue',
      },
   }
}