aidenybai / million

Optimize React performance and make your React 70% faster in minutes, not months.
https://million.dev
MIT License
16.52k stars 582 forks source link

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. #1028

Open nickytonline opened 7 months ago

nickytonline commented 7 months ago

What version of million are you using?

0.0.73

Are you using an SSR adapter? If so, which one?

Netlify

What package manager are you using?

npm

What operating system are you using?

Mac

What browser are you using?

Arc

Describe the Bug

If I run npm run dev, the PR code that I'm reviewing works fine with no invalid hook call errors. If I run the dev server with Million lint, I get the following error:

Unhandled Runtime 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.
126 | function CustomTick(_props6) {
  127 | let _props3 = _props6;
> 128 | /*million ignore*/_captureProps2(1058525330072756, _props6, [98, 20, 98, 27], 0);
      |                                 ^
  129 | /*million ignore*/_useMount2("/Users/nicktaylor/dev/work/app/components/Graphs/ContributorsChart.tsx", "CustomTick");
  130 | let {
  131 |   x,

If you want to see the error in action:

  1. Clone the open-sauced/app repo, gh clone open-sauced/app
  2. Pull down PR #3302, gh co 3302
  3. Install dependencies, npm run install
  4. Run npm run dev.
  5. Navigate to http://localhost:3000/s/remix-run/remix
  6. The page loads fine.
  7. Stop the dev server.
  8. Run USE_MILLION_LINT=1 npm run dev
  9. Navigate to http://localhost:3000/s/remix-run/remix
  10. The million lint dev toolbar loads as well as the page and then it errors out immediately.

CleanShot 2024-05-01 at 17 28 10

I have no idea why it's erroring out at the moment, but happy to help work on this if needed.

What's the expected result?

The Next.js dev server with Million Lint running loads the page instead of erroring out

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/open-sauced/app

Participation

github-actions[bot] commented 7 months ago

Thanks for opening this issue! A maintainer will review it soon.

tobySolutions commented 7 months ago

Hmm, thank you very much for this @nickytonline; taking a look now.

github-actions[bot] commented 6 months ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within the next 7 days.

NisargIO commented 1 month ago

Hi @nickytonline, we've just deployed a fix for you. Can you try running the setup script npx million@latest? Once it's done, please restart your VSCode/Cursor. Let me know if that works for you!