headlessui: cannot read properties of null (reading 'useRef') next v13.4.0: Vercel

I’m also experiencing this with a Remix application.

Update: after a bit more searching, I discovered there are actually a ton of reports of related whack-a-mole issues that seemingly affect different libraries however are all rooted in NextJS v 13.4.x.

Despite issue reports getting closed the underlying problem does not seem to be resolved, including in the latest release 13.4.4.

For now I’ve set the following version in package.json and my build works fine:

"next": "~13.3.4",

For more info check out https://github.com/vercel/next.js/issues/49355 and the web of linked issues and comments I picked 13.3.4 because of this comment: https://github.com/vercel/next.js/issues/49355#issuecomment-1538406708

As lovely as NextJS is and for all the lifting and freebies that Vercel is willing to provide to us devs, I think the endless parade of paradigm shifts and lock-in strategies create a fertile environment for these sorts of issues.

@j-mendez some additional info on this one?, I think I have the same problem just in a different place with version 13.4.7:

2023-06-26T16:40:01.218Z	546e7a1f-5ed3-4b39-9fb3-ec02e225af14	ERROR	TypeError: Cannot read properties of null (reading 'useCallback')
    at Object.useCallback (/var/task/node_modules/react/cjs/react.development.js:1646:21)
    at InsertedHTML (/var/task/node_modules/next/dist/server/app-render/app-render.js:861:52)
    at Je (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:121:272)
    at Z (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:128:91)
    at Ee (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:137:422)
    at AsyncLocalStorage.run (node:async_hooks:338:14)
    at Timeout._onTimeout (/var/task/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.edge.production.min.js:150:403)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7)

I have a similar error and I am using nextjs 13.4.1.

TypeError: Cannot read properties of null (reading ‘useRef’) at useRef (/Users/michael/project/node_modules/react/cjs/react.development.js:1630:21) at Ne (file:///Users/michael/project/node_modules/@headlessui/react/dist/components/tr

Hey all!

The error you are seeing:

Warning: 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.

- error TypeError: Cannot read properties of null (reading 'useRef')

Typically happens when you break the rules of hooks, but the more common reason I’ve seen in practice is that you have multiple React instances on the page.

Headless UI itself doesn’t break the rules of hooks and doesn’t ship with multiple React instances so I’m 99.99% certain this isn’t a Headless UI bug itself.

But, I wanted to see if I could reproduce it using the latest version of Next.js and Headless UI. Trying to reproduce this myself but I cannot reproduce the bug using the latest Next.js version. (For context, Next.js recently solved an issue where multiple React instances were on the page: https://github.com/vercel/next.js/issues/53110)

I created a repository with Next.js, the app/ router and Headless UI

• https://github.com/RobinMalfait/next-headlessui-popover

And deployed it to Vercel:

• https://next-headlessui-popover.vercel.app

The local development (next dev) and a production build (deployed to Vercel) work as expected without errors.

Going to close this issue for now, since I don’t think there is a bug in Headless UI itself (because we don’t break the rules of hooks nor ship multiple React versions).

If you are still running into this issue, please open a new issue with a minimal reproduction repo attached that showcases the issue. Also double check that you are using the latest Next.js version, if not try to bump that first.

Also feel free to use this base setup to get you a head start: https://github.com/RobinMalfait/next-headlessui-popover

Closing fixed in v13.4.1.

Typically happens when you break the rules of hooks, but the more common reason I’ve seen in practice is that you have multiple React instances on the page. […]

@RobinMalfait I think you might be missing the forest for all the trees here, the important line there is probably the last one:

- error TypeError: Cannot read properties of null (reading 'useRef')

The first part is probably just a warning coming from somewhere else in the code.

@ignaciolarranaga you may also need to remove 'use client' from components imported in the pages directory. I added the 'use client' before migration to prep for the changes.