question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

V2, React: Invalid hook call

See original GitHub issue

⚠️ IMPORTANT ⚠️ Please check the following list before proceeding. If you ignore this issue template, your issue will be directly closed.

  • Read the docs.
  • Use Vite >=2.0. (1.x is no longer supported)
  • If the issue is related to 1.x -> 2.0 upgrade, read the Migration Guide first.

Describe the bug

Uncaught 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.

add dependencies to optimizeDeps solves the problem, but is it a bug?

Looks like react-hook-form provided esm version, may be that cause the App and the Library refer to different instance of React?

A clear and concise description of what the bug is.

Reproduction

yarn create @vitejs/app vite3 --template react-ts
cd vite3
yarn add react-hook-form

// add the following to App.tsx
import { useForm } from 'react-hook-form';
function App() {
  ...
  const form = useForm();
  ...
}
yarn dev

OR

https://github.com/xiaoyu-tamu/vite-react-hook-form

System Info

  "dependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-hook-form": "^6.14.0"
  },
  "devDependencies": {
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@vitejs/plugin-react-refresh": "^1.1.0",
    "typescript": "^4.1.2",
    "vite": "^2.0.0-beta.7"
  }
  • vite version:
  • Operating System: MacOS
  • Node version: 14
  • Package manager (npm/yarn/pnpm) and version: yarn

Logs (Optional if provided reproduction)

  1. Run vite or vite build with the --debug flag.
  2. Provide the error log here.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
thelinuxlichcommented, Jan 15, 2021

Even disabling the cache and adding dedupe: ["react", "react-dom"] I’m still getting Invalid hook call

(using latest version)

1reaction
yyx990803commented, Jan 7, 2021

This does reveal an issue: we currently cache non-optimized dependencies via the version string but they may get rewritten with different imports to optimized deps (with different hashes). So we need to a more precise cache invalidation check here.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Invalid Hook Call Warning - React
Hooks can only be called inside the body of a function component. There are three common reasons you might be seeing it: You...
Read more >
Invalid hook call. Hooks can only be called inside of the body ...
You can only call hooks from React functions. Read more here. Just convert the Allowance class component to a functional component.
Read more >
Invalid hook call. Hooks can only be called inside the body of ...
Invalid hook call. Hooks can only be called inside the body of a function component # · Having a mismatch between the versions...
Read more >
Invalid hook call - How to resolve multiple versions of React ...
I've recently figured out through testing (that you can link both react and react-dom at the same time). I noticed that whenever I...
Read more >
Solving React Hooks' invalid hook call warning - Rob Kendal
So what causes the invalid hook call warning? · You might have mismatching versions of React and React DOM. · You might be...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found