Skip to content

^13.0.0 uses a compiled React version which is incompatible with React 18.2.0 #42745

@eddeee888

Description

@eddeee888

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

  1. Run yarn create-next-app and go through the prompts
  2. Run yarn add react-hook-form
  3. Set (next.config.js).nextConfig.experimental.appDir=true
  4. Import and call useForm in pages/index.ts
  5. Run yarn dev
  6. Error shows up in terminal

Or using what's in this repo

https://github.com/eddeee888/next-13-0-2-compiled-react

  1. Run yarn install to install packages
  2. Run yarn dev
  3. Error shows up in the terminal

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions