`use` not found in React export with React `18.2`

[andrewmartin]

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: x64
      Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:14:30 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8103
    Binaries:
      Node: 14.20.0
      npm: 6.14.17
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.0.0
      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 am following the well-written examples here to use the new React use hook in a Client component. I've tried fresh-installing a few times and googling around and couldn't figure out why I'm seeing this error:

TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_2__.use) is not a function

I've tried re-installing React a few times now and I'm definitely using 18.2.

All I'm really doing is this:

import {
  use,
} from 'react';

Has anyone seen this error before?

Expected Behavior

I'd hopefully expect the use export from React to be defined.

Link to reproduction

I'm happy to provide repo if helpful!

To Reproduce

Simply try importing use from React.

[andrewmartin]

Apologies if this is a silly bug, but I cannot for the life of me figure out what's going on here and am a bit stumped.

[ShanonJackson]

Think it's exported as experimental_use and people are doing import { experiemental_use as use } from "react"

Would look for it via...

import * as React from 'react';
console.log(React) // look through all keys + prototype keys and look for use / experiemental_use etc.

[Chia1104]

The use and cache API were declared by Next, they extend the React types. you can check out here by the source code

The use hook still in experimental if you want to use this in pure React app, you need to install experimental version of React with import { experiemental_use as use } from "react"

I think you might have to reinstall Next or make sure you have import the API in Next project.

[himyjan]

use() hook is in react 18.3 next channel

npm i react@next react-dom@next

or

"react": "next",
"react-dom": "next"

then import { use } from "react"

[balazsorban44]

Hi, import {use} from "react" should work, please provide a reproduction.

[andrewmartin]

Awesome! Thank you!

[andrewmartin]

I should ask that we update the docs (unless I missed it?). It wasn’t super clear I needed to install from next at least in my brief digging around on the doc site.

[balazsorban44]

You don't need to install react@next, if that's what you refer to. If you are having issues, I still ask for a reproduction so, we can have a look.

[himyjan]

reproduction (next v13.0.2)

In React 18.2 use() hook not work in next.js page/ dir or react javascript project https://stackblitz.com/edit/nextjs-usfk8g?file=pages/index.js https://stackblitz.com/edit/nextjs-gvzf9a?file=pages/index.tsx

In React 18.2 use() hook works in next.js app/ dir https://stackblitz.com/edit/nextjs-yie3aw?file=app/page.js https://stackblitz.com/edit/nextjs-dcbdwe?file=app/page.tsx

React 18.2 (latest channel)

https://unpkg.com/[email protected]/cjs/react.development.js

React 18.3 (next or canary channel)

https://unpkg.com/[email protected]/cjs/react.development.js

I think the use() works with React 18.2 are because using npm package @types\react or next types definition (.d.ts), not exposed function from React 18.2 source code

npm package next types definition

npm package @types\react types definition

so maybe use() hook in React 18.2 can work after @types\react or next in next.js project or React typescript project.

but not work in React javascript project

[andrewmartin]

Ah thank you for the thorough answer with screenshots. Presumably and hopefully if people have issues they'll stumble on this thread if we don't think a docs update is warranted.

[balazsorban44]

The above is somewhat correct, but when using the app/ directory, Next.js bundles its own version of react, so it really does not matter what is installed currently. Hence I am asking for a reproduction of a case where you have [email protected] installed, but use is unavailable in app/. If we can reproduce that, the issue can remain open, otherwise, we should close it as use should work fine in app/ already. :thinking:

From the screenshot below, I can only see src/App.js which is likely being imported in pages, where features like use aren't supported.

[balazsorban44]

Closing as this is likely not an issue as explained above. Please open a new issue with a reproudction if you believe so.

[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.