-
Notifications
You must be signed in to change notification settings - Fork 29.6k
Closed
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
Operating System:
Platform: darwin
Arch: x64
Version: Darwin Kernel Version 21.6.0: Mon Aug 22 20:17:10 PDT 2022; root:xnu-8020.140.49~2/RELEASE_X86_64
Binaries:
Node: 16.15.0
npm: 8.5.5
Yarn: 1.22.19
pnpm: N/A
Relevant packages:
next: 13.0.3-canary.3
eslint-config-next: 13.0.2
react: 18.2.0
react-dom: 18.2.0
Which example does this report relate to?
None
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
The normal React version in create-next-app
is 18.2.0
nextConfig.experimental.appDir=true
uses compiled react
version which is 18.3.0-next-28a574ea8-20221027
.
This causes types errors when using libraries like react-hook-form
because of version mismatch:
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')
at Object.useRef (/Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/react/cjs/react.development.js:1630:21)
at useForm (file:///Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/react-hook-form/dist/index.esm.mjs:2267:32)
at Home (webpack-internal:///./pages/index.tsx:23:83)
at renderWithHooks (/Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7629:16)
at renderIndeterminateComponent (/Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7702:15)
at renderElement (/Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7927:7)
at renderNodeDestructiveImpl (/Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8094:11)
at renderNodeDestructive (/Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:8066:14)
at renderIndeterminateComponent (/Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7756:7)
at renderElement (/Users/eddeee888/Projects/eddeee888/next-compiled-react/next-compiled-react/node_modules/next/dist/compiled/react-dom/cjs/react-dom-server.browser.development.js:7927:7) {
page: '/'
Expected Behavior
There is no React version clashes when using appDir
config
To Reproduce
From scratch
- Run
yarn create-next-app
and go through the prompts - Run
yarn add react-hook-form
- Set
(next.config.js).nextConfig.experimental.appDir=true
- Import and call
useForm
inpages/index.ts
- Run
yarn dev
- Error shows up in terminal
Or using what's in this repo
https://github.com/eddeee888/next-13-0-2-compiled-react
- Run
yarn install
to install packages - Run
yarn dev
- Error shows up in the terminal
Metadata
Metadata
Assignees
Labels
No labels