blueprint: 4.0.0 dynamic icon imports not working in next.js
I’m seeing every icon imported into my nextjs app on 4.0.0. Is there a specific API I should be using to treeshake them dynamically? https://nextjs.org/docs/advanced-features/dynamic-import
Before I was overriding the generated/svgPaths file. I generally specify my icons via: <Icon icon="caret-down" /> but I can switch to explicit imports if that helps.
Environment
- Package version(s): 4.0.0-alpha.0
- Operating System: Mac OS X 11.2
- Browser name and version: Firefox Stable
Steps to reproduce
- Don’t override generated svg icons file in a next.js repo. Set webpack build version to 5.
- Use
<Icon name="caret-down" /> - Analyze client bundle, all icons are included
Actual behavior
All icons are bundled
Expected behavior
Only used icons should be bundled
Possible solution
Not sure yet. Will report back here if I figure it out. Ref from #4513
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 17 (11 by maintainers)
What’s the best way to access specific Icons while tree shaking in v4? Is there any way?
Any plans to roll out v5 to npm?
v5.0.0 is now in beta release, it should work with webpack / vite / nextjs, see #2193 for more discussion.
I’m going to close this old issue. If there are still issues with icon loading in v5, please open a new issue.
@switz - I’ve posted an update code for ignoring via webpack. If that’s helpful for tou
https://github.com/palantir/blueprint/issues/2193#issuecomment-1204741102
I’m on
"@blueprintjs/icons" "^4.0.0-beta.3"and can no longer import icons from the root package:I converted all of my icon calls to component imports (
import { Tick } from '@blueprintjs/icons') and it did tree shake successfully via next.js and webpack 5. So my issue is solved, personally. Feel free to close this, but if you want to leave it open for your open purposes that’s fine too. Thanks!edit: I also should add, the icon bundle does show up in my bundle analyzer, but is not requested via HTTP anymore as far as I can see. It would be nice to disable that to prevent any risk of that file loading (it’s the size of my entire site).