Describe the problem
Starting in the prerelease builds, @patternfly/react-icons ships a dist/esm/package.json file containing {"type": "module"}. This file does not include the "sideEffects": false declaration that exists in the root package.json. Because webpack resolves the nearest package.json for each module, all icons under dist/esm/ are treated as having side effects, completely breaking tree-shaking.
This causes the entire icon library (all 2846 icons, ~7MB minified) to be bundled even when only a handful are used.
How do you reproduce the problem?
- Install
@patternfly/react-icons@6.5.0-prerelease.19 (or any recent prerelease)
- Import a single icon:
import { CheckCircleIcon } from '@patternfly/react-icons'
- Run a webpack 5 production build
- Observe that ALL icons are included in the bundle
Root cause: dist/esm/package.json contains {"type": "module"} but is missing "sideEffects": false. The root package.json has "sideEffects": false, but webpack uses the closest package.json to each module file, so the dist/esm/package.json takes precedence and the sideEffects flag is never seen.
Expected behavior
Only the imported icons should be included in the bundle. The dist/esm/package.json should include "sideEffects": false to match the root package.json:
{
"type": "module",
"sideEffects": false
}The stable 6.4.x release does not have a dist/esm/package.json at all, so tree-shaking works correctly there.
Is this issue blocking you?
This adds ~5MB of unused icon SVG data to the production bundle. Workaround: add a webpack module rule to explicitly mark @patternfly/react-icons as side-effect-free:
{
test: /node_modules\/@patternfly\/react-icons\//,
sideEffects: false,
}What is your environment?
What is your product and what release date are you targeting?
Console 4.23
Any other information?
This likely affects all packages in the prerelease that added dist/esm/package.json for ESM "type": "module" support. Any package that relies on "sideEffects": false in its root package.json for tree-shaking will be broken if the nested dist/esm/package.json doesn't also include that field.
Jira Issue: PF-3895
Describe the problem
Starting in the prerelease builds,
@patternfly/react-iconsships adist/esm/package.jsonfile containing{"type": "module"}. This file does not include the"sideEffects": falsedeclaration that exists in the rootpackage.json. Because webpack resolves the nearestpackage.jsonfor each module, all icons underdist/esm/are treated as having side effects, completely breaking tree-shaking.This causes the entire icon library (all 2846 icons, ~7MB minified) to be bundled even when only a handful are used.
How do you reproduce the problem?
@patternfly/react-icons@6.5.0-prerelease.19(or any recent prerelease)import { CheckCircleIcon } from '@patternfly/react-icons'Root cause:
dist/esm/package.jsoncontains{"type": "module"}but is missing"sideEffects": false. The rootpackage.jsonhas"sideEffects": false, but webpack uses the closestpackage.jsonto each module file, so thedist/esm/package.jsontakes precedence and thesideEffectsflag is never seen.Expected behavior
Only the imported icons should be included in the bundle. The
dist/esm/package.jsonshould include"sideEffects": falseto match the rootpackage.json:{ "type": "module", "sideEffects": false }The stable
6.4.xrelease does not have adist/esm/package.jsonat all, so tree-shaking works correctly there.Is this issue blocking you?
This adds ~5MB of unused icon SVG data to the production bundle. Workaround: add a webpack module rule to explicitly mark
@patternfly/react-iconsas side-effect-free:What is your environment?
webpack 5.104.1
@patternfly/react-icons 6.5.0-prerelease.19
Node.js 22
What is your product and what release date are you targeting?
Console 4.23
Any other information?
This likely affects all packages in the prerelease that added
dist/esm/package.jsonfor ESM"type": "module"support. Any package that relies on"sideEffects": falsein its rootpackage.jsonfor tree-shaking will be broken if the nesteddist/esm/package.jsondoesn't also include that field.Jira Issue: PF-3895