usedexports | Find in Go exported variables that could be

I've found out the issue: with swiper (at least), sideEffects option must be used at loader level and not at package level. Or maybe you can use at package level, but explicitly declaring the files. Didn't try though. Instead, it did worked by setting sideEffects like this:

Well, I was able to figure out the problem, the problematic lines were:

I think it is case sensitive, ie. change the D to a d, change moduleIDs to moduleIds.

It looks like this happens with material-ui when you build in development. The production build tree-shakes correctly. Weirdly though, material-ui's own docs claim that if you do the direct file import, the dev build should tree-shake correctly too.

I found the problem but I don't understand why webpack drops it.

Quote from https://webpack.js.org/guides/tree-shaking/

Note that any imported file is subject to tree shaking. This means if you use something like css-loader in your project and import a CSS file, it needs to be added to the side effect list so it will not be unintentionally dropped in production mode:

In my package.json I put

I didn't need the browserlist in package.json nor webpack.config.js, I did however need the target: ['web','es5'] in my webpack.config.js. My issue was this & the suggestion from @matthiasgiger -- even though I had set modules to false for my output environment, removing the type="module" was they key

This is due to Terser being unable to reason about the side-effects in your colors.ts enum, so Terser keeps all three definitions even though it only exports one of them.

If these weren't transpiled TypeScript enums, I'd recommend to simplify the declarations, ideally by marking each function /*#__PURE__*/ and making it return its intended value. However, since they are TypeScript enums, you might need to convert them to object literals as const, are certainly easier for Terser to reason about and are likely sufficient for your needs.

If I'm reading your output right, the arrays you're trying to remove are present in both development and runtime builds; you've omitted them with "..." but they're there.

According to your package.json you are using both sideEffects and usedExports of Webpack's tree-shaking feature set. sideEffects correctly asserts that you aren't changing anything aside from your exports, so Webpack can safely skip your whole module if your project consumes none of its exports. However, usedExports might not be as smart as you would hope:

usedExports relies on terser to detect side effects in statements. It is a difficult task in JavaScript and not as effective as straightforward sideEffects flag. It also can't skip subtree/dependencies since the spec says that side effects need to be evaluated.

It seems that for both development and production Webpack is smart enough to detect that your HueColors is the only export you consume, but Terser is not smart enough to determine that each self-initializing IIFE is free of side-effects that would affect the others. Technically, as a human, I can't reason about it either: Some other piece of code might have changed the Object or Array prototype in a bizarre way, even if your functions didn't use inline assignment or modify same-named shadowed variables of an enclosing scope in your IIFEs.

With an in-browser copy of terser I've been able to reproduce your problem.

First of all, switching to const object literals would be completely effective:

It seems that it is a syntax error regarding your opacity. The most common styles use objects so that you would declare opacity as:

2 thing led me to the solution. First of all:

The bable.config.json file has:

"@babel/preset-react"

which causes babel to "remove typescript types". Ref here. Removing it gets rid of the errors, since obviously all types are removed (but obviously babel cannot then process JSX).

Thus I realised that the enum files are ambient, and babel-loader (specifically preset-react) doesn't know how to process them (unlike tsc).

That led me to to this SO question, and I realized I had to specifically tell babel-loader where to find the enum files, and so added this to my package.json: