Migration webpack 4 -> 5 and code splitting trouble antd

What example does this report relate to?

with-styled-components

What version of Next.js are you using?

“next”: “10.2.3”

What version of Node.js are you using?

v14.16.1

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Other platform

Describe the Bug

problem with the code splitting

Expected Behavior

assembly as in 4 webpack

To Reproduce

Hi !

We go from 4 to 5 webpacks, everything seems to work out, but there is a problem with the code splitting, namely with the packages of antd screens I attach the file next.config.js

Webpack 4:

Webpack 5:

Can you please tell me how to make the formation of packages as it was before, so that the webpack does not drag everything into one file _app.js ?

My config:

const webpack = require('webpack');

const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const { withSentryConfig } = require('@sentry/nextjs');
const withAntdLess = require('next-plugin-antd-less');

let CONFIG;

try {
  CONFIG = require('./etc/config');
} catch (e) {
  console.error(
    'Create config from one of examples. See /etc/ dir and copy one of .dev, .test or .prod config file for config.js!',
  );
  throw new Error(e);
}

const SentryWebpackPluginOptions = {
  dryRun: true,
};

const themeVariables = require('./src/.......').antDLessVars;

const config = withSentryConfig(
  withBundleAnalyzer(
    withAntdLess({
      typescript: {
        ignoreBuildErrors: true,
      },
  
      productionBrowserSourceMaps: false,
      trailingSlash: true,
      serverRuntimeConfig: CONFIG.SSR,
      publicRuntimeConfig: CONFIG.CLIENT,

      modifyVars: themeVariables,
      webpack: (config, { isServer, buildId }) => {
        config.plugins.push(
          new webpack.DefinePlugin({
            'process.env.SENTRY_RELEASE': JSON.stringify(buildId),
            'process.env.IS_CLIENT': JSON.stringify(!isServer),
            'process.env.IS_SERVER': JSON.stringify(isServer),
            'process.env.IS_DEV': JSON.stringify(process.env.NODE_ENV),
            'process.env.IS_DOCKER': JSON.stringify(process.env.IS_DOCKER),
          }),
          // new AntdDayjsWebpackPlugin(),
          new FilterWarningsPlugin({
            exclude: /mini-css-extract-plugin[^]*Conflicting order between:/,
          }),
        );

        if (isServer) {
          const antStyles = /antd\/.*?\/style.*?/;

          config.module.rules.unshift({
            test: antStyles,
            use: 'null-loader',
          });
        } else {
          config.plugins.push(new webpack.IgnorePlugin(/^(elastic-apm-node)$/));
        }

        config.resolve.alias['@ant-design/icons/lib/dist$'] = path.join(__dirname, 'icons.js');

        config.module.rules.unshift({
          test: /\.svg$/,
          use: ['@svgr/webpack', 'url-loader'],
        });

        return config;
      },
    }),
  ),
    SentryWebpackPluginOptions,
  );
  module.exports = config;

[devdpontes]

We also have an issue with webpack 5. It’s repeating packages. One example is Axios. All we did was to update nextjs version from 10 to 11. Also happens on v12.

EDIT: We’ve realised that with webpack 5, it actually puts commons into _app along with other chunks. We’re seeing a significant increase on page load downloaded JS, but we suspect it’s related to dynamic imports (next/dynamic).

[ggamvetas87]

We also face the same issue after upgrading our project to next v12 and using webpack 5i It seems as the code splitting does not actually work, since the app.js file contains a lot code of other splitting chunks. Before the issue the app.js filesize was about 4-5KBs and now it has more than 600KB.

We have also tried to comment out all the next dynamic imports from app.js, but it seems as the issue persists, since on build process the app.js still contains code related to other components used via Context (that shouldn’t happen, since we are using code splitting).

We have also seen an increase on page load, and specifically at DomContentLoad, but we strongly believe that this is related to the code splitting failure and the significant increased filesize of the app.js, which actually forces the load of all other chunks that contain the same code.

PS: Is it possible to change the next.config.js configuration in order to apply a “custom” code spilitting until the issue has been resolved?