Comments (9)
Importing from dist is allowed, but only when it is truly an import
, and not transpiled to a require
, as I suspect is happening in jest. The submodule imports are an undocumented feature and were added to address issues with a few bundlers that do not tree-shake well. Is there a reason you can't keep the destructuring import?
from react.
@rektdeckard Iām using the package in a Next.js app router project and I need to import them separately due to the tree-shake issue in development.
from react.
Just pushed an experimental update that has CJS artifacts and should be natively discoverable by node enviroments. Please give it a try by installing version 2.1.3, or with npm i @phosphor-icons/react@next
and LMK if that works.
from react.
Note, you'll have to import them from /dist/ssr
now
from react.
Hey @rektdeckard šš¼
Joining the thread since I have the exact same use-case for these kind of imports, and the exact same problem as OP (only difference is that I'm not using Next's app router), but sadly changing my imports to be from /dist/ssr
instead didn't fix the issue :(
I think probably fixing the type problems mentioned by this other recent thread might help!
It seems no matter how I write the direct imports, it always fails either for the app itself, for the jest tests, or for the Storybook build.
Let me know if I can help in any way, and thanks for looking into this!
from react.
@mredigonda it probably fixed the problem but showed another error, that no type declarations were found. That is what I encountered in testing, at least.
Types are now linked correctly thanks to #71 so you should find this to work in 2.0.14
.
Note: just use @phosphor-icons/dist/{csr|ssr}/IconName
import path
from react.
@rektdeckard awesome, thank you! Now it seems the code typechecks correctly, storybook and jest all working for me locally, but now I have some error messages when deploying to Vercel:
ā¤ YN0000: ā pprof@npm:3.2.1 STDERR node-pre-gyp WARN Hit error response status 404 Not Found on https://storage.googleapis.com/cloud-profiler/pprof-nodejs/release/v3.2.1/node-v108-linux-x64-glibc.tar.gz
And
ā¤ YN0000: ā ssh2@npm:1.11.0 STDOUT Usage Error: Couldn't find a script name "node-gyp" in the top-level (used by ssh2@npm:1.11.0). This typically happens because some package depends on "node-gyp" to build itself, but didn't list it in their dependencies. To fix that, please run "yarn add node-gyp" into your top-level workspace. You also can open an issue on the repository of the specified package to suggest them to use an optional peer dependency.
Are you aware of what the problem could be? Otherwise let me know and I can continue troubleshooting.
Thanks a lot!
from react.
@mredigonda this looks like it could be linked to the Next compiler, as I have seen similar errors that trace back to using large component libraries (1000+ files) in their docs. I will try to find them.
Are you deploying on Vercel? Have you tried using modularizeImports
or optimizePackageImports
options?
from react.
@rektdeckard thanks for your insight! Yes I'm deploying to Vercel, sadly I don't have any single big package that can be reduced massively by using modularizeImports
or optimizePackageImports
(the latter is not even available for me as I'm using an older version that doesn't yet have it.
The effort to update the way I import from @phosphor-icons
was indeed to improve in this regard, instead of having all icons be accidentally imported, I tried to import each icon separately, but yes at the moment the Vercel deploy just fails š.
I'm not sure how to move forward so I've postponed this one, but let me know if you have any ideas on what else I could try, and thanks again for your replies!
from react.
Related Issues (20)
- Add `@preview` tag to enable icon previews in jsdoc HOT 4
- Could not find a declaration file when using SSR HOT 2
- SSR Components missing default size="1em"
- SSR component types are not resolving
- allow to add Contributing.md file.
- Importing icons from `@phosphor-icons/react/dist/ssr` renders the icons, but gives issues in the editor HOT 5
- TypeError: Cannot create property 'displayName' on number 'Infinity' HOT 7
- Unble to dynamic import icons .mjs extensions HOT 9
- Icon instance className overwrites context className HOT 8
- New Twitter (x.com) icon? HOT 1
- Cannot find package on node 20 HOT 6
- ./node_modules/@phosphor-icons/react/dist/lib/context.mjs Can't import the named export 'createContext' from non EcmaScript module (only default export is available) HOT 10
- UnhandledRejection Error: Cannot Find React Package HOT 23
- 'use client' in client icons and IconContext HOT 2
- React warning after update to 2.1.4 HOT 1
- Issue updating past 2.1.3 HOT 2
- Incorrect exports specified in `package.json` HOT 1
- Jest test fails if importing directly from `/dist` folder
- Custom icons: Typescript and ESLint errors in Next.js 14 HOT 1
- React web pack build error in phosphor icons HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react.