I upgraded my project from expo 44 to expo 45 and now I have inumerous errors like this:
The module 'MaterialIcons' can't be used as JSX component.
This error is happening with many libraries like react-native-paper, react-native-elements and even the native ones like expo-vector-icons.
If I rollback the upgrade everything gets back to normal, but I need to update to avoid having to do this later.
obs: I'm using typescript
Solved my problem by adding:
"resolutions": {
"#types/react": "^17"
}
to my package.json file.
It looks like yarn was using two different #types/react for the libraries, and this solved the issue.
Related
In my package.json I have:
...
"devDependencies": {
...
"react-devtools": "^4.14.0",
...
},
"resolutions": {
"react-devtools-core": "4.14.0"
}
when i try to run yarn it shows something like this
warning Resolution field "react-devtools-core#4.14.0" is incompatible with requested version "react-devtools-core#4.25.0"
in the warning, I want to know where version #4.25.0 is coming from
I even removed every reference of react-devtools-core and react-devtools from yarn.lock, remove the node_modules folder and run yarn again, but still the same.
and when the app runs this is what is shows in React Native Debugger
it says Devtools 4.25.0-....
So where is the 4.25.0 coming from?
I do know how to resolve the overall issue, but I just want to understand the reason for the above happening.
Your react native debugger comes with dev tools 4.25.0. You just need to put the same version in your resolution and it should be fine.
I developed an application with react-three-gui and #react-three/drei. After experimenting with the package.json, I was given the following error:
Error in question after changing the package.json file
But despite everything, even after undoing my changes, the error remains.
Things I have tried:
deleting node modules and reinstalling (no changes)
undoing changes and going to previous commits (error remained even then)
deleting only react-three-fiber (react-three-gui throws an error)
I have spent days looking for a solution but can't find one that relates to this specific problem. Anything helps.
package.json
The issue is in the dependencies.
First of all there's both react-three-fiber and #react-three/fiber. The former dependency is deprecated, but it has a dependency on #react-three/fiber and version latest.
So, this leads to a dependency on the latest version of #react-three/fiber which in turn has a dependency on "react": "^18.0.0", despite the "react": "^17.0.2" set in your project's package.json.
So, make sure you get rid of the deprecated dependency and align the dependencies so there are no version conflicts.
Reference for a similar issue: https://github.com/pmndrs/react-three-fiber/issues/2037
Was able to solve the problem by just creating a new react project, and transferring the code and 3d models I created to the new project. Once I reinstalled the necessary packages into the new project, everything started working again perfectly.
i actualize the node_module by doing nom install, then the doesn't work again and I became this error: Unable to resolve module react-native/Libraries/Components/ScrollResponder from /Users/project/node_modules/deprecated-react-native-listview/index.js: react-native/Libraries/Components/ScrollResponder could not be found within the project or in these directories:
node_modules
../node_modules.
in Package.json I have this version of react-native
"react": "^17.0.2",
"react-native": "^0.66.0",
...
Please help me I am a beginner, thanks a lot
I had this problem with version 0.0.6 of deprecated-react-native-listview but version 0.0.7 has a fix for this.
I take a look at react-native source code and I realized that ScrollResponder component was removed when react-native v0.65. Your react-native version is 0.66.0 therefore get this error.
Check the diff react-native v0.64 with v0.65 here: https://github.com/facebook/react-native/compare/0.64-stable...0.65-stable
You can consider downgrading your react-native version or use an alternative component instead of deprecated-react-native-listview.
In my portfolio app, I'm trying to merge a PR into the main branch, which contains code to implement React Query. The app works fine on development but when I try to deploy it, Vercel gives me the error above that apparently occurs when they try to build my app.
I tried installing ts-toolbelt as a dependency but it doesn't seem to work.
Here's the project's repo and precisely to the failing PR (You wont' get access to the vercel deployment details as it's my account, but every error that appears is shown in the picture above)
Same thing happened to me and after some research looks like the ts-toolbar version that comes in the React-Query package is not compatible with the Typescript version my React app is using.
To fix it I added a resolutions field on the package.json to force the ts-toolbelt dependency to a compatible version, like so:
"resolutions": {
"ts-toolbelt": "6.15.5"
}
6.15.5 being the ts-toolbelt version compatible with my Typescript version (3.8.3)
Then running yarn install solved the issue for me.
I've got a project in React + Typescript + Webpack stack and I'm using react-data-grid package with #types/react-data-grid package. The problem is that the typings provided in #types/react-data-grid are not complete. Which results in typescript error when trying to use one of the properties. However I know this property exists and it's just the matter of incomplete typings. So I've got two issues I would like to resolve:
Add appropriate typings that would work together with #types/react-data-grid. Is there and option to that? That somehow typescript compiler would merge my new typings with #types/react-data-grid and stop showing the error?
Enable Hot Reloading in Webpack. Even thought the typings error is shown ,still the bundle is created and after refreshing page while using webpack-dev-server. So I can actually develope but it would be nicer to have hot reloading. Is there an option to tell webpack-dev-server to ignore typescript errors? I just want to do it in the meantime and later fix the issue with Ad. 1.
I am using:
"ts-loader" : "^4.1.0",
"typescript" : "^2.7.2",
"webpack": "^4.2.0",
"webpack-cli": "^2.0.13",
"webpack-dev-server": "^3.1.1"
Answering the question 1.
Generally you cannot. It can be that you will be able to extend their typings by extending their classes / interfaces and use your extended versions, however it is way better to extend the types by making a pull request at https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types which is where the #types/* are coming from
Answering the question 2.
This is what is coming from ts-loader docs
The build should fail on TypeScript compilation errors as of webpack
2. If for some reason it does not, you can use the webpack-fail-plugin.
It is done for good, because otherwise you will end up fixing production bugs before the release when you have already forgotten everything you did instead of fixing the errors while writing the actual code. Probably this could be disabled by using transpileOnly option.
Another option is using awesome-typescript-loader instead of ts-loader which has a errorsAsWarnings option