Is react-spring-carousel tree-shakeable?

[do-kevin]

Is this package tree-shakeable? I was having trouble with the original version where my build is using the react-spring the package uses and the react-spring I added. And this new version's size is much larger than its predecessor now.

[Emiliano-Bucci]

@do-kevin Hi! With latest release - v2.0.7 it should be completely. Still, the size of the package is a litter big due to react-spring, which seems not to be totally three shackable. Still, react-spring is a peerDependency (previously was included in the package), so if you're using it, the size shouldn't grow that much.

[do-kevin]

Hi @Emiliano-Bucci, thanks for letting me know about the newer releases. react-spring is fine for me. Looking at my tree map, I seem to be mostly importing cjs instead of esm. It's importing a lot from rxjs and react-spring-carousel's size is at ~414kb.

I am using Gatsby 4 (and TypeScript) and using babel-plugin-import to clean up unused components. I've tried using it with react-spring-carousel, but it causes build errors. Here's what my config looks like:

  actions.setBabelPlugin({
    name: "babel-plugin-import",
    options: [
      {
        libraryName: "antd",
        libraryDirectory: "es",
        style: false,
      },
      {
        libraryName: "beautiful-react-hooks",
        libraryDirectory: "esm",
        camel2DashComponentName: false,
        style: false,
      },
      // {
      //   libraryName: "react-spring-carousel",
      //   libraryDirectory: "dist/esm",
      //   camel2DashComponentName: false,
      //   style: false,
      // },
    ],
  });

I've also tried importing like this import { useTransitionCarousel } from "react-spring-carousel/dist/esm", but that didn't work either. Is there something wrong with my config?

[do-kevin]

Oh my mistake, sorry about this. I had my module in tsconfig.json set to "commonjs" instead of "ES2020". Yes, your package is tree-shaking and its size shrunk.