Comments (5)
The error indicates that the UMD bundle is being imported. I don't know exactly why this would cause issue, but it could be related. It may have something to do with the React peer dependency and your bundling process, because I read this error as saying "Webpack can't find the React import at runtime", and with UMD react libraries, React
is expected to be available on the window object, IIRC.
Couple ideas:
You might want to try upgrading from 2.0.6 to 2.0.10, which has "type": "module"
by default.
Try changing from import React from 'react'
to import * as React from 'react'
in your component lib, and/or adding "esModuleInterop": true
and "allowSyntherocDefaultImports": true
to your tsconfig there too, if not already present.
This isn't an error I have seen with Phosphor before, and it looks more like something with your bundling.
from react.
Hey - Thanks for your suggestions @rektdeckard
Unfortunately still not joy. I bumped to 2.0.10
but that had no affect.
I have been poking around with our tsconfig
a bit but no avail. Perhaps if I drop it in here you could take a look and see if anything jumps out at you.
You suggestion to change the imports of react to import * as React...
- I've tried that in my ThemeProvider.web.tsx
file, but would you suggest doing this across the whole component library? There's about 100 components to make that change in, but I'd have thought doing in a single place would serve the purpose of the test.
{
"include": ["src", "@types/**/*", "contracts"],
"exclude": ["lib", "storybook/webpack.config.js", "./stories"],
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"declaration": true,
"emitDeclarationOnly": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"module": "CommonJS",
"isolatedModules": true,
"jsx": "react",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"moduleResolution": "node",
"outDir": "lib",
"noEmit": false,
"resolveJsonModule": true,
"rootDir": "./src",
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"target": "ES2015",
"paths": {
"contracts/*": ["contracts/*"]
}
},
}
from react.
Ok, so I've got it working... I'm cautious about calling it a total victory but it has unblocked me for what has been 3 days of not much fun.
I've added the minified React bundles to our html
file in script tags and then added React
to our webpack config as an externals
prop.
// public/index.html
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
// webpack.common.js
externals: {
React: 'react',
},
In your response when you said that the umd couldn't find React
on the window, that pointed me down this route to look for a solution there, so thank you for that.
from react.
Just another thought, I see jsx: react
in your config. Have you tried switching to jsx: react-jsx
to use the automatic runtime? If not, React will need to be in scope in every file in your component library.
from react.
And in fact, in every consumer too
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.