Tree Shaking Not working in Gatsby

couds / react-bulma-components

React components for Bulma framework

MIT License

1.2k stars 126 forks source link

Tree Shaking Not working in Gatsby #345

Closed rotexhawk closed 3 years ago

rotexhawk commented 3 years ago

My site slowed down after updating to the latest react-bulma and on bundle analysis I noticed that the tree shaking feature is not working. I am using this plugin in gatsby.

couds commented 3 years ago

Hi @rotexhawk can you share your configuration?and if possible a small repo with a reproducible example

Without more information it's quite difficult to understand what is happening

rotexhawk commented 3 years ago

Hello @couds, thanks for the quick reply. I setup a bare bone repo here. https://github.com/rotexhawk/jameygittings. All you have to do is npm install and npm run build.

Thanks

couds commented 3 years ago

Hi @rotexhawk after checking this issue in Gatsby, seems that the tree shaking only works on ES6 Modules, and the default export for this library its commonjs.

We also have es6 export, you need to change the import like this

// CommonJS (Default)
import { Content, Footer, Container } from "react-bulma-components";

// ES6
import { Content, Footer, Container } from "react-bulma-components/esm";

With this the tree shaking works

rotexhawk commented 3 years ago

Great. Thanks for the update. This works :)