Webpack 5.68 not tree shaking ESM imports

Question

I can't get tree shaking to work correctly on my project running Webpack 5.68 and Babel 7.17.0.

If I import my component like this everything works fine and dandy.

import { InlineNotification } from 'carbon-components-react/es/components/Notification';

If I import like this, the entire library is imported into my bundle.

import { InlineNotification } from 'carbon-components-react'; It is not an issue with carbon-components-react, I was just giving an example. This happens with all libraries.

Below is my code. I'm not sure what I am missing!

// .babelrc

{
  "presets": [ 
      [
          "@babel/preset-env",
          {
              "modules": false
          }
      ],
      "@babel/preset-react"
  ],
  "plugins": [
      "react-hot-loader/babel",
      "@babel/plugin-transform-modules-commonjs",
      "@babel/plugin-proposal-class-properties"
  ]
}

// package.json

{
  "name": "my app",
  "engines": {
    "node": "^8.9.0",
    "npm": ">= 5.5.0"
  },
  "main": "index.jsx",
  "scripts": {
    "dev": "npx foreman --procfile Procfile-dev start",
    "build": "npm run build:prod",
    "build:dev": "webpack --progress --config webpack.build.dev.js",
    "build:prod": "NODE_ENV=production webpack --progress --config webpack.build.prod.js",
 
  },
  "devDependencies": {
    "@babel/core": "^7.17.0",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-transform-modules-commonjs": "^7.16.8",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "babel-jest": "^26.6.3",
    "babel-loader": "^8.2.3",
    "webpack": "^5.68.0",
    "webpack-bundle-analyzer": "^4.5.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.11.3"
  },
  "dependencies": {
    "@carbon/icons-react": "^10.45.0",
    "@carbon/themes": "^10.50.0",
    "carbon-components": "^10.52.0",
    "carbon-components-react": "^7.52.0",
    "css-loader": "^1.0.1",
    "foreman": "^3.0.1",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-hot-loader": "^4.13.0",
    "webpack-merge": "^4.2.2"
  }
}

// webpack.common.js

const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');

const HtmlWebpackPluginConfig = new HtmlWebPackPlugin({
  template: './template/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: './index.jsx',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss?/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.(png|woff|woff2|eot|ttf|svg)$/,
        loader: 'url-loader', options: {limit: 100000}
      }
    ]
  },
  plugins: [
    HtmlWebpackPluginConfig,
  ],
  resolve: {
    fallback: {
      fs: false,
      net: false,
      tls: false
    }
  }
};

// webpack.build.prod.js

const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
const common = require('./webpack.common');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = merge(common, {
  name: 'build:prod',
  mode: 'production',
  output: {
    filename: 'dist/js/bundles/bundle.[contenthash].js',
    path: path.resolve(__dirname, '.')
  },
  optimization: {
    runtimeChunk: {
      name: 'manifest',
    },
    splitChunks: {
      chunks: 'all'
    }
  },
  plugins: [
    new webpack.IgnorePlugin({
      resourceRegExp: /^\.\/locale$/,
      contextRegExp: /moment$/,
    }), // ignore all of the momentjs timezones
    new BundleAnalyzerPlugin({ defaultSizes: 'gzip', generateStatsFile: true }),
  ]
});

Answer 1

I fixed this, the issue was a plugin in my .babelrc file @babel/plugin-transform-modules-commonjs. I needed to remove this and ensure all of my imports/exports were using ESM rather than commonJS module.exports.