Webpack build does not remove dead code with SWC as compiler in default webpack config

Current Behavior

Importing a react-icon causes the entire module to be included in the resulting webpack bundle, not just the one icon.

// packages/bundle-test/src/app/app.tsx
import { MdPerson } from "react-icons/md"

export function App() {
  return (
    <MdPerson size={128} />
  );
}
export default App;

Running webpack analyze shows the file size of bundled output is excessive

Inspecting dist/main.hash.esm.js we can see the entire module has been imported.

Expected Behavior

Importing a react-icon should not include the entire module from react-icons/md, only the imported icon. Inspecting dist/main.hash.esm.js should show that only the one icon has been imported. In the reproducible repo below, I have been able to produce a fix that outputs this analysis, significantly reducing the size footprint:

Steps to Reproduce

A minimal repo has been made by @rudfoss and a branch attempting to fix this has been made by me @espenja over at https://github.com/rudfoss/nx-bundling-issue/tree/minimizer-fix

Editing the code in ./webpack.custom.ts to the below code, or just using the default "@nrwl/react/plugins/webpack" as webpackConfig, reproduces the issue reported in this ticket:

//./webpack.custom.ts
/* eslint-disable @typescript-eslint/no-var-requires */
import { Configuration, ids } from "webpack"
const getWebpackConfig = require("@nrwl/react/plugins/webpack.js")

module.exports = (config: Configuration) => {
    getWebpackConfig(config)

    // if (config.optimization) {
    //     delete config.optimization.minimizer
    // }

    // if (config.plugins) {
    //     config.plugins.push(new ids.HashedModuleIdsPlugin({
    //         hashFunction: 'sha256',
    //         hashDigest: 'hex',
    //         hashDigestLength: 4,
    //     }))
    // }
    return config
};

By default from nx, config.optimization.minimizer contains an instance of new webpack.ids.HashedModuleIdsPlugin() By removing the default config.optimization.minimizer setting, the bundle produces expected results. Therefore I am left wondering if the HashedModuleIdsPlugin is inserted at the wrong place by nx? Should it not instead have been inserted in config.plugins as per webpacks own test files found here https://github.com/webpack/webpack/blob/c181294865dca01b28e6e316636fef5f2aad4eb6/test/configCases/hash-length/hashed-module-ids/webpack.config.js ?

Enabling my fix again to the below code should produce a significantly lower size footprint in the webpack output.

//./webpack.custom.ts
/* eslint-disable @typescript-eslint/no-var-requires */
import { Configuration, ids } from "webpack"
const getWebpackConfig = require("@nrwl/react/plugins/webpack.js")

module.exports = (config: Configuration) => {
    getWebpackConfig(config)

    if (config.optimization) {
        delete config.optimization.minimizer
    }

    if (config.plugins) {
        config.plugins.push(new ids.HashedModuleIdsPlugin({
            hashFunction: 'sha256',
            hashDigest: 'hex',
            hashDigestLength: 4,
        }))
    }
    return config
};

We are using swc as compiler.

Failure Logs

N/A

Environment

Node : 16.14.2 OS : win32 x64 npm : 8.5.0

nx : 14.1.9-beta.1 @nrwl/angular : Not Found @nrwl/cypress : 14.1.9-beta.1 @nrwl/detox : Not Found @nrwl/devkit : 14.1.9-beta.1 @nrwl/eslint-plugin-nx : 14.1.9-beta.1 @nrwl/express : Not Found @nrwl/jest : 14.1.9-beta.1 @nrwl/js : 14.1.9-beta.1 @nrwl/linter : 14.1.9-beta.1 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/nx-plugin : Not Found @nrwl/react : 14.1.9-beta.1 @nrwl/react-native : Not Found @nrwl/schematics : Not Found @nrwl/storybook : 14.1.9-beta.1 @nrwl/web : 14.1.9-beta.1 @nrwl/workspace : 14.1.9-beta.1 typescript : 4.6.4

Community plugins:

[espenja]

@AgentEnder Would it be possible to re-open this issue and take another look? I have provided more information and an updated reproduction repository after migrating to the newest version of nx and verifying that it still does not work. This is specifically for swc as compiler.

[KraKeN-47]

As of nx v14.8.4 and v15 , newly built @nrwl/react default app bundle size differs very much between babel and swc options, both examples ran with default serve:production scripts and analyzed with webpack-bundle-analyzer:

Babel:

Swc: