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?