When using optimization.splitchunks library is not available in import

Bug report ?

Not sure if its a bug, but I am stuck here and want help from the community…

What is the current behavior? I am creating a library to be used in react web and react-native. Since library size is too heavy, am trying to split it into chunks and trying splitChunks but library doesn’t seem to be available for import.

Importing a simple module from this library isn’t available when splitChunks is enabled. However when not using splitChunks, it works like charm.

Here is my webpack.config

module.exports = {
    entry:
    {
        'index': './src/index.ts',
        'utils': './src/index.utils.ts',
    },
    output: {
        path: path.join(__dirname, "dist"),
        filename: "[name].ts",
        library: ["frontend-business", "[name]"],
        libraryTarget: "commonjs2"
    },
    devtool: 'inline-source-map',
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                exclude: /(node_modules|build|dist)/,
                use: {
                    loader: 'babel-loader',
                }
            },
            {
                test: /\.ts?$/,
                include: path.resolve(__dirname, 'src'),
                use: 'ts-loader',
                exclude: /(node_modules|build|dist)/,
            },
        ]
    },
    externals: {
        'react': 'commonjs react', // this line is just to use the React dependency of our parent-platform-project instead of using our own React.
        '@types/react': 'commonjs @types/react'
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        }
    }
};

What is the expected behavior? With splitChunks it should have work as without it because I dont see any extra work associated with splitChunks to make it work.

Other relevant information: webpack version: 4.41.2 Node.js version: 10.16.3 Operating System: Darwin

[madruga8]

no one was able to fix this… only dynamic imports works when code splitting are enabled.

[dkamyshov]

Hi, @sokra!

That’s pretty unusual for a library.

It is sometimes useful (especially in reactlandia) to have a library with multiple entrypoints, with each entrypoint re-exporting a common module (think of a singleton). We need all entrypoints to require the shared module. It is trivial to achieve with rollup, see this demo: https://github.com/dkamyshov/rollup-split-library-reproduction/tree/master/dist

With webpack, it is somewhat achievable with libraryTarget: 'module', though it uses some weird dynamic requires and I’m not sure whether webpack would consume such a library. Those dynamic requires look like this:

/******/ 	(() => {
/******/ 		var next = __webpack_require__.x;
/******/ 		__webpack_require__.x = () => {
/******/ 			__webpack_require__.e("src_a_js-src_b_js");
/******/ 			return next();
/******/ 		};
/******/ 	})();