I am importing a npm dependency using a dynamic import call like this

const { default: Sortable } = await import(
         /* webpackMode: "lazy" */ 'sortablejs'
    );

I want webpack to see this import and know to create a separate chunk for it. However webpack seems to keep the dependency in the same main bundle.

This technique works for lazy loading my own js files such as this.

const importedComponent = await import(/* webpackMode: "lazy" */ `./components/${templateId}.js`);

However for some reason when importing a dependency from node_modules it's not performing this behavior and keeping the dependency bundled within my main bundle.

My webpack config looks like this

'use strict';
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = function (env, argv) {
    const webpackConfig = {
        mode: argv.mode,
        devtool: argv.mode == 'production' ? undefined : 'eval',
        target: 'web',
        plugins: [
            new MiniCssExtractPlugin(),
        ],
        entry: {
            designer: ['./src/webapps/designer/designer.js', './src/webapps/designer/designer.css'],
        },
        output: {
            filename: '[name].bundle.js',
            path: path.resolve('build', 'public'),
            publicPath: '/',
            clean: true,
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        {
                            loader: 'css-loader',
                            options: {
                                url: false,
                            },
                        },
                    ],
                },
                {
                    test: /\.html$/i,
                    loader: 'html-loader',
                },
            ],
        },
    };

    return webpackConfig;
};

NOTE: I am able to force it to create a separate chunk using optimization.splitChunks.chunks='all';. However this doesn't perform the intended behavior because webpack isn't generating code to dynamically fetch the dependency with a web request. Instead I would have to manually include that chunk in the HTML source code. I want the webpacked code to fetch the dependency on it's own when it is needed.

Node version: 18.0.0

Webpack version: 5.72.0

Webpack cli version: 4.9.2