@tabler-icons/react not getting tree-shaken by Webpack

[jadhaidar]

Running webpack v5.47.0

These are the only icons we're importing:

import {
  IconArrowBack,
  IconArrowDown,
  IconArrowMergeAltLeft,
  IconArrowRight,
  IconArrowsUpDown,
  IconArrowUp,
  IconArrowUpRight,
  IconBell,
  IconBookmark,
  IconBookmarkFilled,
  IconBookmarks,
  IconCheck,
  IconChevronDown,
  IconChevronLeft,
  IconChevronRight,
  IconChevronUp,
  IconCircleCheck,
  IconCirclePlus,
  IconCopy,
  IconDotsVertical,
  IconDownload,
  IconFileDownload,
  IconFolder,
  IconInfoCircle,
  IconLayoutBoard,
  IconLayoutGrid,
  IconLayoutList,
  IconLayoutSidebarLeftCollapse,
  IconLink,
  IconLock,
  IconMenu2,
  IconMenuDeep,
  IconNote,
  IconPencil,
  IconPlus,
  IconReload,
  IconSearch,
  IconSettings,
  IconShare,
  IconSortAscendingLetters,
  IconStar,
  IconTag,
  IconTrash,
  IconUpload,
  IconUser,
  IconUserPlus,
  IconUsers,
  IconWorld,
  IconX,
  IconBuilding,
} from '@tabler/icons-react';

This is our webpack config:

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

module.exports = (env) => {
  return {
    mode: 'production',
    entry: {
      app: path.join(__dirname, '../chrome/extension/app'),
    },
    output: {
      path: path.join(__dirname, '../build/js'),
      filename: '[name].bundle.js',
      chunkFilename: '[id].chunk.js',
    },
    optimization: {
      usedExports: true,
      minimize: true,
    },
    plugins: [
      new webpack.IgnorePlugin(/[^/]+\/[\S]+.dev$/),
      new webpack.DefinePlugin({
        'process.env': ((env) => {
          const keys = Object.keys(env);
          keys.forEach(
            (k) => (env[k] = JSON.stringify(process.env[k] || env[k]))
          );
          return env;
        })(env),
      }),
      new BundleAnalyzerPlugin(),
    ],
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    module: {
      rules: [
        {
          test: /\.(tsx|jsx|ts|js)?$/,
          loader: 'babel-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.(styl|css)$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: (loader) => [require('autoprefixer')()],
              },
            },
            'stylus-loader',
          ],
        },
        {
          test: /\.(png|jpg|gif|svg)$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '/img/[name].[ext]',
                publicPath: function (url) {
                  // Extra '/' in firefox ? maybe also related to https://github.com/axiomzen/toby-product/issues/424
                  return env.BROWSER === 'firefox' ? url.substring(1) : url;
                },
              },
            },
          ],
        },
      ],
    },
  };
};

Am I missing something here?

[codecalm]

@jadhaidar can you try use version 3.0.0-alpha.0 ?

can ou give me your version of webpack, react and node?

[jadhaidar]

@codecalm thank you for your reply! Unfortunately upgrading to 3.0.0-alpha.0 did not work.

Here are the versions I'm using:

"webpack": "5.47.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2",
"react": "^18.2.0",
"node": "16.14.2",

[jadhaidar]

Realized our babel config was transpiling modules into commonjs, preventing webpack from tree-shaking our code. Once we toggled it off we were good to go!

For reference:

  ['@babel/preset-env', { modules: false }],