Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Treeshaking failing to remove an export that's only dynamically imported

See original GitHub issue

Bug report

What is the current behavior?

I found a bug with treeshaking, and will link to this repo to explain it.

The RxFunctionList file defines 2 named exported variables - one small (a graphQL fragment) and one heavy (the entire list of rxjs exports). Another file, App, statically imports the light export from RxFunctionList, and dynamically imports the heavy export.

Goal: for webpack’s treeshaking to remove the heavy export from the main bundle, as we only statically import the light variable from RxFunctionList. We want the main bundle to be free of any of the rxjs exports.

Test case	Static import only	Dynamic import only	BUG: Static AND dynamic import
Result	treeshaking removes rxjs exports as expected	the bundle does not contain rxjs exports (they are code split)	BUG: treeshaking fails, bundle includes rxjs exports
Main bundle size (before minification)	589kb	588kb	802kb
Webpack bundle analzyer
Branch code	static import	dynamic import	static import and dynamic import

Steps to reproduce

make sure your node version is 17+
git clone this repo
cd frontend
yarn install
yarn build
webpack-bundle-analyzer should open, and the main bundle should be 800+ kb (before minification).
for further proof the bundle contains rxjs, open dist/main.bundle.js and see that it includes rx functions like bindnodecallback, dematerialize

Additional information

I found this discussion of a similar topic and made sure to enable Terser in my webpack config. As explained in the grid above, I am getting treeshaking to work properly when only statically importing from a file - but it fails to treeshake exports that are dynamically imported, despite the fact they are never statically imported.

Other relevant information: webpack version: 5.65 Node.js version: 17 Operating System: Mac OS Additional tools: yarn, react, typescript