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
I am getting this error while locally running it. but it is building properly.
When i remove
from index.html it works fine but now build does not work.
Related
All,
I have an issue while doing Dynamic import of React Library (Built using webpack) in to React Application (Built using react-scripts). I was unable to import the component with normal import statements. I have tried to add the Library instance to window object and use it in react application which is working fine, but limited to Class based Components. If I try to use Functional Components, it says
`Invalid Hook Call Warning
You are probably here because you got the following error message:
Hooks can only be called inside the body of a function component.
There are three common reasons you might be seeing it:
You might have mismatching versions of React and React DOM.
You might be breaking the Rules of Hooks.
You might have more than one copy of React in the same app.`
Can anyone help on resolving my issue?
I had this errors with do any thing application was running correct, close the application and open it and that what happened without change Name of application,
I tried to remove Node-modules and reinstall it close vs code and open it again
nothing happen
First 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:
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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
second error:
Invariant Violation: "main" has not been registered. This can happen if:
Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
A module failed to load due to an error and AppRegistry.registerComponent wasn't called.
I have created a library of React components that I reuse in various projects.
In my package.json I reference the library using file://
"reactcomponents": "file:../reactcomponents",
Everything works fine until I start running a jest tests that references one of these components. I get the 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
34 | function Toast(props) {
35 | var timer = null;
> 36 | react_1.useEffect(function () {
The error is happening because (3) I have another (same) version of react in my react component library and in the main project. If I copy the Toast component into my main project, the project goes away.
The issue is discussed here:
https://github.com/facebook/react/issues/13991
How do I get round this?
I have created one functional component and used hooks and created library using rollup. when I uses that component in other application it is throwing below 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
Note:
I have used const while declaring component.
If I take the code from library and put it into the application, it is working fine.
I have published my first package. It works except one component. That component has a dependency on another package (not mine) when I test it with npm link without that dependency it works. But with a dependency I have an 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'
I don't use hooks in my project.
My code:
render() {
return (
<div>
<MediaQuery>
...
</MediaQuery>
</div>
)
}
The problem is in MediaQuery. Without it, my package works.
But I need this dependency. How to handle it?