Next.js 13 use() not working for Client Components

[ipenywis]

Verify canary release

• [X] 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: Mon Aug 22 20:19:52 PDT 2022; root:xnu-8020.140.49~2/RELEASE_ARM64_T6000
Binaries:
  Node: 16.15.0
  npm: 8.5.5
  Yarn: 1.22.19
  pnpm: 7.5.2
Relevant packages:
  next: 13.0.1-canary.0
  eslint-config-next: 13.0.0
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome 106.0.5249.119 (Official Build) (arm64)

How are you deploying your application? (if relevant)

In development

Describe the Bug

Getting error TypeError: Cannot read properties of null (reading 'use') when trying to use use() and fetch with Client Components.

I'm using the same snippet code example provided in the Docs for Client Component Data Fetching with the use() hook and fetch()

Expected Behavior

use() hook function should be defined and imported from react without issues.

Link to reproduction

https://codesandbox.io/p/github/ipenywis/nextjs-client-component-issue

To Reproduce

Navigate to /client-component route, you will see an "Unhandled Runtime Error" saying TypeError: Cannot read properties of null (reading 'use')

The file is under app/client-component/page.tsx

[himyjan]

@ipenywis In react 18.2 and next 13.0.2 use() hook work in app dir, not in pages dir https://github.com/vercel/next.js/issues/42548#issuecomment-1308087311

use() hook is official react hook and still in react@next (18.3), not in react@latest (18.2) right now you need to install next version of react

"dependencies": {
  "next": "canary",
  "react": "next",
  "react-dom": "next",
},

or

"dependencies": {
  "next": "^13.0.1-canary.1", or "canary" or "^13.0.0"
  "react": "^18.3.0-next-cf3932be5-20221027",
  "react-dom": "^18.3.0-next-cf3932be5-20221027",
},

install next or experimental channel of react and react-dom

npm i react@next react-dom@next

then you can import { use } from react;

[ipenywis]

@himyjan I'm still getting the same error even though I upgraded react@next as you mentioned and next is at canary

[ipenywis]

I updated the codesandbox to include react@next.

Also, noticed useRouter when trying to do router.push() is failing with an error: TypeError: Cannot read properties of null (reading 'push') It's on the codesandbox too, when clicking the "Back Home" button.

[himyjan]

@ipenywis https://beta.nextjs.org/docs/routing/linking-and-navigating#userouter-hook

try import from 'next/navigation';

import { useRouter } from 'next/navigation';

not

(X)
import { useRouter } from 'next/router';

[ipenywis]

@himyjan Gotcha! The router works now! Thanks 👍

[timneutkens]

Based on the messages above it seems this issue can be closed, is that the case?

[ipenywis]

@timneutkens Initially the problem was with the use() hook not working with 'Client Components'. But I just tested it again and it looks like it's working fine! Before, I was getting TypeError: Cannot read properties of null (reading 'use') when trying to use the hook for fetching async data inside a client component.

Not sure exactly what changed!!

UPDATED SANDBOX: https://codesandbox.io/p/github/ipenywis/nextjs-client-component-issue

[timneutkens]

Great, will close this issue then. Keep in mind that use(fetch()) is not supposed to work yet in client components and that it's recommended to fetch in server components regardless of it not being available yet.

https://beta.nextjs.org/docs/app-directory-roadmap → search for use() and fetch() in Client Components

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.