This problem is killing me, but I keep getting this error when I compile and run (I am using .NET Core 3.0 with react app):
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
The error points to my ../src/index.js file:
Here is the error displayed
Here is the code that is flagged with the invalid hook call error
I'm not sure what's going on, i spent the past 3 hours trying to fix it but I just can't get the homepage to show.
I understand the hooks error, but I don't understand why its getting called.
I have the matching versions of React and React DOM, 16.13.1
For my react components, I use classes.
I'm not sure how to check for different copies of react
I'm quite new to React so maybe i misunderstood or messed up somewhere, please help me here, thank you.
EDIT:
Check if redux is installed on the client. This error occurs when it isn't installed on client directory but server directory.
check package.json of client.
Maybe a crazy solution but in my case nothing was actually wrong with my code. I was going nuts trying to find the error. But what actually helped, was upgrading the version of Typescript installed in my project from 4.4 to 4.9. Don't see any evident connection but after the upgrade everything worked like a charm. :)
Related
So I need to update react, react-dom in order to update nextjs version to 11. React docs says that the new jsx transform approach is backwards compatible, though I met such problem after updating to react 17.0.2. Any file using jsx fails to compile with Can't resolve 'react/jsx-dev-runtime', no matter if I leave the import React from 'react', or remove it as intended after updating to react ^17.
I tried updating #babel/preset-react, using latest #babel/plugin-transform-react-jsx, same problem. The only thing I've found in a similar question topic here is adding /** #jsxRuntime classic */ to the top of the file, which obviously doesnt solve the problem for the whole application (perhaps there might be a way to make such directive global but even then - I would like to be able to use the new and more optimised jsx compiling)
Haven't been able to google exactly my case and any existing suggestions for similar cases didn't help.
To summarise - I need to either make my app work without importing react itself (https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) or at least to be able to use the old way of jsx compiling with this new react version.
Any thoughts?
Recently I have upgraded to React 17 and it's started showing "'React' is declared but its value is never read" error in all the files. As per the React Doc I don't need to import the React anymore. It's working if I remove it but I have concerns here! Mine was a big project.. i don't want to touch each and every file. Is there a way that i get of this problem without removing React from import statement.
I'm using typescript and ESLint.
Add DISABLE_NEW_JSX_TRANSFORM=true in your .env file, and don't forget to stop/start your project
This morning I had this error in my react application: SharedArrayBuffer will require cross-origin isolation as of M91, around May 2021.
I saw that react must be updated, that's what I did and I went to version 17.0.2 of react-dom and react.
But I only get errors like this:
TypeScript error in ... : Generic type 'ValueType' requires 2 type argument(s). TS2314
I have tried to solve them, but when I solve one error, another comes up and it goes on and on.
Note: I get the project from a former developer who did not provide me with any doc and the code is not commented on so my radius of action is very small
I'm using Yarn v2 (berry) to manage a monorepo with the following structure:
project-root
/packages
react-native-app
(dependencies: my-hooks-lib, react#17.0.1)
my-hooks-lib
(dependency: react#17.0.1)
Here's my .yarnrc.yml:
yarnPath: ".yarn/releases/yarn-berry.cjs"
nodeLinker: "node-modules"
nmHoistingLimits: "workspaces"
I've disabled hoisting since I'm working with a React Native app. But because of this, react-native-app and my-hooks-lib have separate copies of react#17.0.1, even though the versions are the same. This results in a Invalid Hooks call error:
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
This is because my-hooks-lib uses a different copy of React, even though the version is the same. It works fine if I import React like this:
// inside my-hooks-lib
import React from "../react-native-app/node_modules/react";
I made React a peer-dependency inside my-hooks-lib, but that didn't help either, since Yarn creates a symlink to my-hooks-lib inside react-native-app, but it isn't able to resolve React. I then installed React as a dev-dependency at the root of my project, and now I'm back to my original problem, since now my-hooks-lib refers to the copy of React at the project root.
Is there a way to fix this during development?
Update: As a workaround, I've made React as a peer-dependency for both react-native-app and my-hooks-lib, and added React as a dev-dependency at the project root. So this is what it looks like now:
<project-root>
(dev-dependency: react#17.0.1)
/packages
/react-native-app
(dependency: my-hooks-lib, peer-dependency: react#17.0.1)
/my-hooks-lib
(peer-dependency: react#17.0.1)
Although I'd still love to hear a better solution!
I have successfully managed to render a React component inside of ember.
You can see the relevant code here.
The basics being adding an addon, that uses the preprocessTree hook, to use broccoli-react to parse the jsx files as per here. And a ReactComponent (which is an ember component) to wrap any react component.
This works well in ember cli 2.11.0 and 2.12.0, but in 2.13.0 and 2.14.0 something has changed and I can't figure out what.
I have narrowed the error down to this line in ember-resolver, for some reason this._moduleRegistry in the newer versions don't have the react component but the older versions do...
Any ideas?
I uninstalled everything node. And started matching package versions 1 for 1 from the newer app into the older one, and it all works.