Webpack 5.68 not tree shaking ESM imports - reactjs

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.