3.4.2 "sideEffects: false" option causes site to render improperly

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.2

Environment

webpack 4.6.0

Reproduction link

Steps to reproduce

With 3.4.2 I notice antd components CSS doesn’t load on my production site. If I edit node_modules/antd/package.json and remove the line “sideEffects: false” it goes back to normal.

My build makes use of babel-plugin-import, MiniCssExtractPlugin, less-loader to build the css

The development site with hot-reloading works fine, but when i build the production site it looks like no antd css loads at all

excerpt from webpack.prod.js

{
        test: /\.(css|less)$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          {
            loader: 'less-loader',
            options: {
              modifyVars: antdTheme,
              javascriptEnabled: true,
            },
          },
        ],
      },

with 3.4.1 a “yarn build” will produce a vendors.js and vendors.css, but with 3.4.2 the vendors.css does not get generated at all

What is expected?

The production build worked in 3.4.1 and also works if i remove “sideEffects: false” from node_modules/antd/package.json

What is actually happening?

unknown

---

[plhosk]

If I modify "sideEffects": false and instead set it to

  "sideEffects": [
    "es/**/style/*"
  ]

the problem goes away.

It might have to do with this from the Tree Shaking page on webpack.js.org:

“Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode”

[tim-soft]

I see, so if you are using babel-import-plugin you’ll need to use this config { libraryName: 'antd', "libraryDirectory": "es", style: true }.

The default option of lib doesn’t work after this change.