3

I have a monorepo yarn workspaces project that contains a create-react-app application and a UI library.

In my @app/ui packages, inside the src folder, I have a the following files:

country.ts

interface Country {
  name: string;
  alpha2: string;
  alpha3: string;
  subregion: string;
}

export const countries: Record<string, Country> = {
  NZ: {
    name: 'New Zealand',
    alpha2: 'NZ',
    alpha3: 'NZL',
    subregion: 'Australia and New Zealand'
  },
};

index.ts

export * from countries.ts;

...as well as other files that are exported from index.ts above. Even though my @app/cra application has @app/ui as a dependency, and has the following line of code in one of its files:

import { MyComponent } from @app/ui

I never actually import anything from countries.ts. I use craco to be able to include the external UI package in the react-scripts build of the CRA by overriding the configuration to include the external folders using babel-loader.

However, when I build the CRA app for production and use source maps analyzer to examine the bundles resulting from the build, I always find countries in there. Why is it not tree shaken?

Sammy
  • 3,395
  • 7
  • 49
  • 95

0 Answers0