V2, React: Invalid hook call

[michael-land]

⚠️ 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.

[aleclarson]

Try adding dedupe: ["react", "react-dom"] to your Vite config.

[michael-land]

Thank you. you saved the day

[michael-land]

Umm.. It's still not work as expected. It only work if I comment the useForm hook, build, and uncomment it.

Here is the repo: https://github.com/xiaoyu-tamu/vite-react-hook-form

[yyx990803]

Tested in beta.10 and it works as expected - I think this has to do with the local dependency browser cache - tick disable cache in your devtools and run it again and it should work.

[yyx990803]

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.

[thelinuxlich]

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

(using latest version)

[yyx990803]

@thelinuxlich always open new issue with valid repro - commenting on old issues does't get things fixed.