Bug: Misleading error message when using "use" hook without a Suspense wrapper

[callumlocke]

React version: 18.3.0 (Canary)

Steps To Reproduce

1. In a client-only React app without a Suspense wrapper, try doing const val = use(new Promise((resolve) => { resolve(123) })) in a component.
2. It fails to render - look at the console message.

The current behavior

The error message you get if you fail to use a Suspense wrapper when using use(promise) is:

async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

(Adding a <Suspense>...</Suspense> wrapper fixes it.)

The expected behavior

It should fail with a better error message, one that states the actual problem and suggests a solution (using a Suspense wrapper).

Notes

It seems if you do use(promise), then it is required to also wrap your component in a Suspense wrapper, or it will fail to render. But this requirement is not clearly stated in the docs, and the error message in the browser console is very confusing.

[pbaner16]

Hi! wondering if anyone has claimed this?

And based off your previous comment, I see two tasks, then:

1. Edit the docs
2. Edit the error message

If so, maybe we can tag this as a documentation issue as well? Either way, happy to contribute and take up one of the above tasks if this is still an issue that needs to be looked into!

@callumlocke

[github-actions[bot]]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!