Bundle size issue: Webpack loads every icon even if the app only uses one

[Michael Zhao]

Hello, I noticed my bundle size is very large and a big portion is @fluentui/react-icons. After some investigation, it seems like a tree-shaking issue.

I found this issue: microsoft/fluentui#25861 which indicates that #562 should fix the problem. However, it does not appear to be fixed.

I have created a minimal example that reproduces this issue: https://github.com/Pistonight/webpack-react-icons-testing which shows the following code resulting in an output size of around 9MB

import React from "react";
import ReactDOM from "react-dom/client";
import { Info24Filled } from "@fluentui/react-icons";

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(<Info24Filled />);

Note: My other projects that use vite instead of webpack does not have this problem. Seems like esbuild is not impacted

[Michael Zhao]

Found the fix: Using module: "esnext" instead of module: "commonjs" in tsconfig fixed it