Treeshaking with import * (TypeScript)

[d4ny0]

Hello Next Community Members!

I am using using styled-components and styled-icons with material icons for our typescript app.
The goal is to dynamically import only the icons that we need.

The example component below does that but as i import all icons i can't treeshake them and my bundle is blown up with icons we don't use.

Is there something I'm doing wrong or that I'm missing here to load only the icons we want and still utilize tree shaking for this?

We're using next 9.3.5

Here is the code for the component.

import React from 'react';
import * as MaterialIcons from '@styled-icons/material';

const MaterialIcon: React.FC<{ size?: string | number; iconName?: string }> = ({ size = 24, iconName = null }) => {
  if (!Object.prototype.hasOwnProperty.call(MaterialIcons, iconName)) return null;

  return React.createElement(MaterialIcons[iconName], { size });
};

export default MaterialIcon;

this is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "~styles/*": ["components/styles/*"],
      "~components/*": ["./components/*"],
      "~HOC/*": ["./HOC/*"],
      "~hooks/*": ["./hooks/*"],
      "~context/*": ["./context/*"],
      "~utils/*": ["./utils/*"],
      "~types/*": ["./types/*"],
      "~data/*": ["./data/*"]
    }
  },
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "**/*.d.ts",
    "jest.config.js"
  ]
}

and this the next.config.js

// eslint-disable-next-line import/no-extraneous-dependencies
const webpack = require('webpack'); // it is installed with nextjs
const { parsed: localEnv } = require('dotenv').config();
const path = require('path');

module.exports = {
  webpack(config) {
    config.plugins.push(new webpack.EnvironmentPlugin(localEnv));

    config.resolve.alias = {
      ...config.resolve.alias,
      '~components': path.resolve(__dirname, 'components'),
      '~styles': path.resolve(__dirname, 'components/styles'),
      '~HOC': path.resolve(__dirname, 'HOC'),
      '~hooks': path.resolve(__dirname, 'hooks'),
      '~context': path.resolve(__dirname, 'context'),
      '~utils': path.resolve(__dirname, 'utils'),
      '~types': path.resolve(__dirname, 'types'),
      '~data': path.resolve(__dirname, 'data'),
    };

    return config;
  },
};

[frank-dspeed]

Hi i am not familar with webpack but with typescript and with treeshaking in general (rollup)

Your using * import + a function that uses dynamic icons['']

This can not be resolved this needs always to get handled not treeshaken as no one knows programatical what your using and what not :)

import only the icons that you need and then this can work!

[ivan-kleshnin]

@frank-dspeed this is not correct. Webpack4 supports tree-shaking for namespaced imports (import * as x from ...) with some limitations related to reexports: webpack/webpack#9607

Should work out of the box in Webpack5 (unsupported in NextJS yet).

[timneutkens]

Webpack 5 support is currently in beta: https://nextjs.org/blog/next-9-5#webpack-5-support-beta

[frank-dspeed]

Uff overall that are great news