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?
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'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 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 am using Firebase Cloud Functions to host my SSR Nextjs app. I can deploy the Nextjs app on firebase cloud functions and access it with clean URLs without React Hooks but with React Hooks I get an error message:
Invariant Violation: 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
This issue has also been reported here on a GitHub firebase/firebase-functions repo.
There is also a reproducible example repo to test the bug (useState hook implemented in pages/about.tsx file).
This is done on, React: 16.10.2
The problem superficially stems from two copies of the react source code. I'm not 100% sure how it works so I won't even try to explain the root cause of the problem.
To fix the problem, please place the app inside the functions folder and remove package.json. Unfortunately, all the dependencies of app must necessarily be dependencies of functions. Then, change next.config.js to this:
'use strict';
module.exports = { distDir: './next' };
and index.js to this:
const dir = __dirname + "/app" const app = next({ dev, dir, conf: {distDir: 'next'} })
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.