Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
nickytonline opened this issue May 1, 2024 · 3 comments
Labels

Comments

@nickytonline
Copy link

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

  • I am willing to submit a pull request for this issue.
Copy link

github-actions bot commented May 1, 2024

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

@tobySolutions
Copy link
Contributor

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

Copy link

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.

@github-actions github-actions bot added the Stale label May 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants