Hi Guys I'm trying to export a component with bit.dev but after several attempts I always get this error on the preview of the component and importing the component I always get error.
Module not found: Can't resolve 'react/jsx-runtime' in '/capsule/node_modules/#bit/giovannigiampaolo.testCollection.button/dist'
Can someone help me?
If this issue is in the typescript project then, we need to add tsconfig.json to the project.
Since we cannot follow the default folder structure of NodeJS, we shall need to create an environment for the workspace.
Reference Link: Bit Envs Overview
We can try to implement the way documented above.
Using this I got configurations of typescript, webpack, and jest.
The typescript folder contained the tsconfig.json file and we can edit it to our requirements.
Updating your React to the latest version will solve the issue; did it for me. Just do:
yarn add react#latest
and you're good.
Related
I'm working on a react project with typescript (set up with create-react-script).
Following the doc I've installed react-query with
yarn add #tanstack/react-query
But I keep getting the typescript error: Cannot find module '#tanstack/react-query' or its corresponding type declarations.
Any idea of what I might be missing ?
While I could downgrade to react-query v3 as suggested here, I'd rather have the v4 working.
Thanks for your help !
I tried
removing and reinstalling react-query
removing node_modules and re build my project
Conclusion to the story: I had misconfigured my docker compose volume. So, the package was installed in the container but not in local which explained the error in my IDE.
Sorry if I made someone loose his/her time and I hope it might still be of some use to others !
I tried installing Tradingview's 'lightweight-charts' for react typescript but I can't seem to download the #types for this package because it does not show up on package.json. Therefore, unable to render my react app.
I have tried installing with npm and yarn but they both don't work
Can anyone please help me?
Where can I download the types for this package so it works? The npm repository says that it supports typescript.
thanks in advance!
As part of our package, we generate and provide types that can be found here (for instance).
In theory you shouldn't have to do anything to start working with Typescript as it should work out of the box
I have a monorepo which exposes a TypeScript module, which is consumed & used by a React TypeScript project.
When the module inserts arbitrary React elements to the virtual DOM - everything works as expected, including when I try to use React Router (which was initially problematic but I was able to fix that).
However, when I try to use react-intl, via FormattedMessage, I get the error:
Error: [React Intl] Could not find required `intl` object. <IntlProvider> needs to exist in the component ancestry.
Which is especially annoying as I see this printed in the console logs:
The above error occurred in the <Context.Consumer> component:
in FormattedMessage
in h2
in div
in Loading (at App.tsx:11)
in IntlProvider (at App.tsx:8)
in App (at src/index.tsx:9)
in StrictMode (at src/index.tsx:8)
(note the IntlProvider wrapping Loading - which is the element that uses FormattedMessage which can't find IntlProvider).
I imagine this is somehow related to versioning, or having 2 instances of React / React DOM / IntlProvider, but I have no idea to how solve this, and I have spent quite a lot of time trying everything I could think of.
For what it's worth, here's what I use:
TypeScript - for both module and project
Webpack to pack the module, where I declared React, ReactDOM and react-intl as externals and added them as peerDependencies rather than direct dependencies
create-react-app for the project
I was able to create a minimal repro repository, here's how to repro my issue:
<cd somewhere>
git clone https://github.com/chakaz/repro-repo .
cd repro-lib
npm install
npm run build:dev
cd ../project
npm install
npm run start
Anyone has any idea? Tons of thanks in advance!
With your above way in order to make it work, you have to delete node_modules in your repro-lib dir cause it will install dependencies in both dirs.
So in order to resolve problem of monorepo, I'd like to suggest you use yarn's workspace functionality as described carefully here: https://classic.yarnpkg.com/en/docs/workspaces/
To summary, it's a great functionality to help working with multiple workspaces by just only yarn install once.
Here are a few steps to make your repo working:
Put package.json at the root level of the project with following content:
{
"private": true,
"workspaces": ["project", "repro-lib"]
}
Go to project dir and replace following line in package.json:
"pf-common": "file:../repro-lib"
to
"pf-common": "1.0.0"
Finally, just go back to root top level install deps again:
yarn install
That's it! Now you can re-run your application to see how it works.
NOTE: In terms of having interest in monorepo, lerna is also great tool comes to help by providing great CLI.
I am trying to import #material/ui core into a SSR React project. I have come across the following error.
node_modules#babel\runtime\helpers\esm\objectWithoutProperties.js:1
I feel like I am missing a dependency but not sure which to install.
Any suggestions on how to fix?
Thanks
I need to update the babel packages:
Specifically https://babeljs.io/docs/en/babel-runtime and
https://babeljs.io/docs/en/babel-helpers
I am new to react and I have this problem when trying to use react-bootstrap.
I've installed react-bootstrap, reactstrap and react-bootstrap-select, and the problem is that when I try to import something from react-bootstrap I get this error:
./node_modules/react-bootstrap/es/DropdownMenu.js Module not found:
Can't resolve '#babel/runtime/core-js/array/from' in
'C:\webprojects\react\mytest-app\node_modules\react-bootstrap\es'
I removed the line calling this script and I got another similar error, but that mentions another script.
I have searched in many placed on the web and installed babel-runtime and I tried npm install but nothing seems to work. If I go to the mentioned folder I find these scripts. I don't really know what to do or what is the exact problem here.
Any help would be appreciated.
This looks like a recently introduced bug you are hitting, making the current 0.32.2 version of react-bootstrap incompatible with the babel version used:
https://github.com/react-bootstrap/react-bootstrap/issues/3231
We temporarily fixed the react-bootstrap version in package.json to 0.32.1 as a workaround.