million icon indicating copy to clipboard operation
million copied to clipboard

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

Open nickytonline opened this issue 2 months ago • 2 comments

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

  • [X] I am willing to submit a pull request for this issue.

nickytonline avatar May 01 '24 21:05 nickytonline