Comments (23)
I've just published v2.0.8, which includes a UMD export (compatible with CJS build tooling), and does not specify "type": "module"
in package.json
. This should alleviate all of the build issues mentioned here. As a side-effect of the build, we won't support any qualified imports in that environment:
import AddressBook from "@phosphor-icons/react/AddressBook"; // CAN'T DO THIS IN CJS ENVIRONMENT
import { AddressBook } from "@phosphor-icons/react"; // CAN DO THIS IN EITHER ENVIRONMENT
from react.
@rektdeckard I just tested the latest update of @phosphor-icons/react
with Sanity (latest version 3.8.2
) and its working great! No issues are logged when deploying graphql or with importing icons into react templates!
from react.
Ok, thank you. I will check again tomorrow to see if there's something I can change in the esbuild configuration and/or in my Turborepo setup and I'll let you know.
I'll link you my repo when I commit the changes since right now I have them locally on my machine.
from react.
As I mentioned above that only works if you have set your package type to "module"
instead of "commonjs"
in your package.json
file.
But this isn't possible for every type of application/package. Sanity requires you to use common js and switching is quite the hassle. I've tried doing that in the past with various degrees of success and you have to make compromises whichever way you chose to go.
from react.
Yeah definitely. I appreciate the help!
I'll update in this thread if a receive an answer tomorrow from the Sanity team.
from react.
Everything is all good for me. Seems like the original issue is resolved as well @milovangudelj?
from react.
I'm not sure I understand. This is a valid exports
field, and points to a valid file... This sounds like a Turborepo or esbuild bug to me?
from react.
If you want to link me the repo I could take a look. I could remove this field altogether, since the module
field is present in package.json
and serves the same purpose, and we only have a single entrypoint. But there doesn't appear to be anything wrong about this. In order to make use of this field, you need node@^12 and typescript@^4.7, according to this SO post, but it should not be causing issues otherwise.
from react.
Some digging shows that TS may need assistance with export maps in node versions <=14
. I would try adding "moduleResolution": "Node16"
or "NodeNext"
in your tsconfig and/or making sure you are on a modern node version.
from react.
Transferring issue to @phosphor-icons/react
, since it pertains to this library only.
from react.
Ok, so... I've checked and I'm using the latest version of both Typescript (v4.9.5
) and Node.js (v18.1.0
).
Previously I said I was using esbuild but I meant tsup, I guess I got confused since tsup uses esbuild under the hood.
I took me a while but I converted the package to type module
form commonjs
. This allowed me to add
"module": "nodenext",
in my tsconfig
file which fixed the issue with the exports
field in your package.
Removing the exports
entry from the package.json
present in the node_modules
directory also fixed the issue but it wasn't an optimal solution. It would have had to be a change from your side and I don't know if this would break things for someone else just to fix a bug for me.
As a last note, if you want you can see the repo here. I'm transferring an old repository to a monorepo and upgrading to Next.js v13. The published site is this https://piscina.ilikemartians.com.
Shameless plug, I know 🤣
from react.
Glad to hear you got it resolved. It sounds like the issue is actually that we don't provide a CJS export anymore 😟
from react.
Out of curiosity, why is that? I mean, why don't you provide a CJS export anymore? Is it just a decision to move towards an ESM future or is there a technical issue that prevents you from being able to provide both?
from react.
Any solution?(
from react.
The solution rn is to convert your package type from commonjs
to module
in your package.json
.
Once you do that you can then add
"module": "nodenext",
in your tsconfig
file. This should fix the issue.
If for some reason you can't convert to a module type package you can remove the exports
field from the library's package.json
present in the node_modules
directory, but that's just a temporary fix.
from react.
I use js. Instead of ts config, i added in jsconfig
This solution didn't work for me(
from react.
From VS Code's jsconfig.json
reference page
Tip:
jsconfig.json
is a descendant of tsconfig.json, which is a configuration file for TypeScript.jsconfig.json
istsconfig.json
with"allowJs"
attribute set totrue
.
So you should still be able to declare this in there
"module": "nodenext",
from react.
Does anyone know what the solution for this is? I am also getting this issue when using the latest version of Phosphor Icons with Sanity. However everything works with the old phosphor-react
library. It would be best not to downgrade though..
For instance, when trying to launch a simple graphql-deploy
for my content schema I get the following error:
$ sanity graphql deploy
Error: Failed to load configuration file "/my_project_path/studio/sanity.config.js":
No "exports" main defined in /my_project_path/node_modules/@phosphor-icons/react/package.json
Would be great to see a simple solution for a javascript project (without typescript).
@milovangudelj does the "module": "nodenext"
go in package.json
? I haven't had to use this approach before..
from react.
Nope, it goes either in your tsconfig.json
or jsconfig.json
file.
This is necessary if you're trying to use an ESM-only package, and @phosphor-icons/react
became ESM-only after v2.
from react.
Hmm yeah that didn't work for me.. I may just post this issue on the Sanity forms tomorrow and see what the best approach is. I may just have to downgrade to the old version of Phosphor. Could be just my specific use case with Sanity 🤔
from react.
I also recommend using the fully qualified path if you're doing modular imports (@phosphor-icons/react/dist/icons/Foo)
from react.
Any other issues here, or safe to close?
from react.
I haven't had the chance to try it out yet but judging from what I've read so far it seems resolved. I'll close the issue for now.
Feel free to reopen it if you find more errors related to this.
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.