vercel / react-tweet

Embed tweets in your React application.
https://react-tweet.vercel.app
MIT License
1.52k stars 83 forks source link

Throw a better error if `<NextTweet>` is used inside a client component #38

Open joulev opened 1 year ago

joulev commented 1 year ago

Currently NextTweet is a RSC so cannot be used in the pages directory or in a client component (from now we call these "client components" for short).

But if we do use it like that, the error is very unclear, something like

Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

So I think the package should throw a clearer error.

I have thought of three ways to do it.

  1. Check for window → this doesn't really work because the error can only be thrown in runtime, not in prerender where window is still undefined.

  2. Use server-only → the error message is not much better.

    This module cannot be imported from a Client Component module. It should only be used from a Server Component.

  3. Make a custom server-only and customise the error message.

The third way works, but it would effectively makes the whole package available only on server-side, so components like <TweetSkeleton> can no longer work in client components. I even tried to dynamically import server-only, but that doesn't suffice.

All three have drawbacks and don't work one way or another, and I don't know of a fourth way. So while I planned to make a PR, I decided to open this issue instead. What do you think about this?