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

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

[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

[timneutkens]

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