[v2] - Tree shaking not working correctly with some libraries (react-icons)

[SpicyPete]

Description

Using react-icons with a few imported icons, results in the full library being imported. The project (react-icons) seems to be setup correctly and working with other frameworks, so I believe this is an issue with the webpack configuration/defaults.

Relevant discussion
react-icons/react-icons#154

Steps to reproduce

import { FaBeer } from 'react-icons/fa'
use <FaBeer /> in a component
npm run build
=> Results in a bloated webapp

[cpboyd]

@pzenger I think tree-shaking primarily seems to work for ES6 modules whereas react-icons is using CommonJS: https://cdn.jsdelivr.net/npm/react-icons@3.0.5/fa/index.js

For tree-shaking with lodash, I had to switch to importing from lodash-es instead.

Perhaps it's worth checking out webpack's sideEffects flag per this issue

[SpicyPete]

@cpboyd Hmm interesting, I'll need to dig more into this.
Seems odd that tree-shaking would only work with one convention. The same react-icons library has tree shaking working fine with Create React App 🤔

[andykais]

according to the ongoing discussion over at react-icons react-icons/react-icons#154, to get tree shaking to work in v3, you need to import from the .mjs files. The gist of it is that we need to change webpack's resolve.extensions to include .mjs files. However, from my naiive messing around with gatsby-node.js I was not able to get this to work

[andykais]

update: I have found a workaround to get .mjs files to play nicely with gatsby.

// gastby-node.js
exports.onCreateWebpackConfig = () => {
  actions.setWebpackConfig({
    resolve: {
      extensions: ['.mjs', '.js'],
    },
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  })
}

// src/pages/index.js
// it is necessary to specify index.mjs or webpack will choose index.js by default.
import { FaBeer } from 'react-icons/fa/index.mjs';
const IndexPage = () => (
  <FaBeer/>
)
export default IndexPage

tree shaking does work with this method, my bundle size is much smaller than if I use index.js

using

• gatsby@2.0.0
• react-icons@3.0.5

[KyleAMathews]

Probably we should add support for .mjs in core. Can anyone think of a reason not to do this?

[abdullahe]

I have the latest version of react-icons and gatsby, but still having this issue. I am very new to this, so I might be missing something.

Here is webpack bundle analyzer result:

I load icons like this:

import { FaChevronDown } from "react-icons/fa"; import {IconContext} from "react-icons";

but tried this as well:

import { FaChevronDown } from "react-icons/fa/index"; import {IconContext} from "react-icons";

packages:
"bulma": "^0.9.0", "gatsby": "^2.23.3", "gatsby-background-image": "^1.1.1", "gatsby-cli": "^2.12.46", "gatsby-image": "^2.4.7", "gatsby-plugin-brotli": "^1.3.1", "gatsby-plugin-manifest": "^2.4.11", "gatsby-plugin-netlify": "^2.3.5", "gatsby-plugin-netlify-cms": "^4.3.5", "gatsby-plugin-offline": "^3.2.9", "gatsby-plugin-purgecss": "^5.0.0", "gatsby-plugin-react-helmet": "^3.3.4", "gatsby-plugin-sass": "^2.3.4", "gatsby-plugin-sharp": "^2.6.11", "gatsby-plugin-smoothscroll": "^1.1.0", "gatsby-remark-copy-linked-files": "^2.3.5", "gatsby-remark-images": "^3.3.10", "gatsby-remark-relative-images": "^0.3.0", "gatsby-source-filesystem": "^2.3.11", "gatsby-transformer-remark": "^2.8.15", "gatsby-transformer-sharp": "^2.5.5", "lodash": "^4.17.15", "lodash-webpack-plugin": "^0.11.4", "netlify-cms-app": "^2.12.14", "node-sass": "^4.14.1", "prop-types": "^15.6.0", "react": "^16.8.4", "react-dom": "^16.8.4", "react-helmet": "^6.1.0", "react-icons": "^3.10.0", "uuid": "^8.1.0"