Next 13: experimental appDir breaks react-hook-form useForm()

[kmcaloon]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.6.0: Wed Aug 10 14:28:23 PDT 2022; root:xnu-8020.141.5~2/RELEASE_ARM64_T6000
Binaries:
Node: 16.17.0
npm: 5.1.0
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.1-canary.3
eslint-config-next: 13.0.0
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

I have been using react-hook-form and after upgrading to Next 13 I am setting the following error related to their useForm() hook. I am not using the new app directory, but when I set experimental: { appDir: true } in my next config I get the following error:

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.
TypeError: Cannot read properties of null (reading 'useRef')
    at Object.useRef (/Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/react/cjs/react.development.js:1630:21)
    at useForm (file:https:///Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/react-hook-form/dist/index.esm.mjs:2262:32)
    at Form (webpack-internal:https:///./src/components/Form/Form.tsx:24:84)
    at renderWithHooks (/Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7629:16)
    at renderIndeterminateComponent (/Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7702:15)
    at renderElement (/Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7927:7)
    at renderMemo (/Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7839:3)
    at renderElement (/Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7999:11)
    at renderNodeDestructiveImpl (/Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8094:11)
    at renderNodeDestructive (/Users/KMcaloon/Documents/Projects/project-kodiak/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8066:14)
error - TypeError: Cannot read properties of null (reading 'useRef')

I opened this issue here first because it seems directly related to the app directory config and wanted to get a better understanding as to what might be affected this before opening an issue with them.

Expected Behavior

App works perfectly fine without the invalid hook warning and type error when appDiir is set to false. Since none of the apps components live within the new app directory we would expect the behavior to be the same even when appDir is enabled.

Link to reproduction

https://stackblitz.com/edit/vercel-next-js-aufyu7?file=next.config.js

To Reproduce

Run next dev and try to refresh the page and you will see the error.

[oelbaga]

I don't recall if the pages directory uses server components by default like the app directory does but if so I believe that can be an issue and you have to add 'use client' At the top. Try console logging in your component to identify if it's a server or client component.

[kmcaloon]

Sorry, I forgot to mention that I've tried both with and without 'use cllient' at the top and I get the same error. I'm pretty sure it shouldn't matter though as long as nothing within the app directory is importing it.

[lukemorales]

If your reproduction matches exactly your setup, you need to add app/layout.tsx for that to work. Once you enable the app directory next is gonna use that as the root, and you need a root layout to render the basic html structure.
Here's a fork of your reproduction working: https://stackblitz.com/edit/vercel-next-js-n7jjy7?file=next.config.js,app/layout.tsx,pages/index.tsx (not sure why react-hook-form is not installing on container setup, but just make sure to run yarn and yarn dev on the container terminal)

[ruslanguns]

Hi @lukemorales thanks for the work around. Do you know now the reason of why this happens?

[MikeDupree]

I'm also seeing a similiar issue using pages dir with standalone builds. For me removing standalone builds seems to resolve the issue. However, this increases our image sizes so isn't optimal.

I get this error TypeError: Cannot read properties of null (reading 'useRef') However i do not receive the warning about react hooks used outside a component.