Carbon: HeaderMenu causing import of entire @carbon/icons-react package

Created on 19 Jun 2020 · 6Comments · Source: carbon-design-system/carbon

What package(s) are you using?

[x] carbon-components-react
[ ] carbon-components
[x] @carbon/icons-react

Detailed description

Describe in detail the issue you're having.

...
import HeaderMenu from "carbon-components-react/lib/components/UIShell/HeaderMenu";
...

causing import of entire @carbon/icons-react package

Is this issue related to a specific component?

Yes. HeaderMenu from UIShell

What version of the Carbon Design System are you using?

"carbon-components": "^10.14.0",
"carbon-components-react": "^7.14.0",
"carbon-icons": "^7.0.7",

Additional information

Also importing of icons like this also causes import of entire package

import { Search20, Notification20, AppSwitcher20 } from "@carbon/icons-react";

So I import icons like this

import Search20 from "@carbon/icons-react/lib/search/20";
import Notification20 from "@carbon/icons-react/lib/notification/20";
import AppSwitcher20 from "@carbon/icons-react/lib/app-switcher/20";

I think that problem because of this line in HeaderMenu component

...

import { ChevronDown16 } from '@carbon/icons-react';

...

I am using Laravel Mix

const mix = require("laravel-mix");
const path = require("path");
const autoprefixer = require("autoprefixer");
const cssnano = require("cssnano");

mix
  .react("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css")
  .options({
    postCss: [autoprefixer(), cssnano()]
  })
  .webpackConfig({
    output: { chunkFilename: "js/[name].js?id=[chunkhash]" },
    resolve: {
      alias: {
        "@": path.resolve("resources/js")
      }
    }
  })
  .version()
  .sourceMaps();

Screenshots or code

waiting for author's response 💬 question ❓

Source

GraxMonzo

All 6 comments

Changing

import { ChevronDown16 } from '@carbon/icons-react';

import ChevronDown16 from '@carbon/icons-react/lib/chevron--down/16';

fixes problem

GraxMonzo on 19 Jun 2020

I think @carbon/icons-react is not tree-shakable

GraxMonzo on 19 Jun 2020

👍1

Hey there! 👋

Since you are using the CommonJS import path, the package is not able to be tree-shaken. You will need to use the ESM path:

import { HeaderMenu } from "carbon-components-react";

The @carbon/icons-react package is able to be tree-shaken when using ESM imports, here's a quick source explorer built from create-react-app:

File sizes after gzip:

  41 KB  build/static/js/2.b640a69d.chunk.js
  771 B  build/static/js/runtime-main.c06c98fe.js
  653 B  build/static/js/main.2f375949.chunk.js
  547 B  build/static/css/main.5f361e03.chunk.css

App.js

import { Bee32 } from '@carbon/icons-react';
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <Bee32 />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Let me know if I can help out at all! Typically this problem around tree-shaking comes up when a team is using CommonJS through a lib path, or there is some configuration issues going on with Webpack.

joshblack on 24 Jun 2020

I've run into a similar issue and I don't think it's specific to carbon-icons. I've reproduced the issue with it with another package called react-use. I suspect it's a webpack optimization issue that create-react-app may have solved somewhere deep in it's config. It may be specific to being a node_modules dependency of an async chunk not included directly in an entry point (included via async import()). Just a theory though. I've tried adding an import to carbon/icons-react to the main entry point and it doesn't have this issue.