Tree shaking in NextJS includes all of node_modules package even if not using it all

Question

Below is a screen shot of my package size from Next JS. What I want to point out is the react-color components under node_modules. I am importing them this way:

import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';

But you see it includes all the things I'm not using such as photoshop.js, sketch.js, etc.

How do I get it not to bundle the things I'm not using with tree shaking?

I did notice that import { debounce } from 'lodash'; imported all of lodash but import debounce from 'lodash/debounce'; reduced the package size by 200kB.

Answer 1

In order for the tree-shaking to work properly react-color should add module property to the package.json which will point to esm version of the lib.

Since it doesn't have it, you will need import directly.

Before:

import React from 'react'
import SketchPicker  from 'react-color'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}

After:

import React from 'react'
import SketchPicker  from 'react-color/lib/Sketch'

class Component extends React.Component {

  render() {
    return <SketchPicker />
  }
}