[RFC]: Clear error messages when client comp used in server comp

[colbywhite]

Summary

If you forget to slap a 'use client' on a component that ends up using useState or just accidentally used the useState in a part where you weren't supposed to, here is the current feedback (as i can tell) you get:

• FatalErrorPage is rendered with no other info
• the following is in the server logs TypeError: __vite_ssr_import_1__.default.useState is not a function or its return value is not iterable at Counter (/Users/colby/git/rsc/web/src/components/Counter/Counter.tsx:8:59)

ideally you'd get an error message that very very clearly communicates you did client things on the server. in my own playing with this, i purposefully removed a 'use client' to see what the error message would be. if i hadn't put myself in this scenario on purpose i'm not sure i would have immediately groked that i had crossed a RSC boundary.

Motivation

IMO, the hardest part of regulars devs who aren't react experts and are just trying to meet a deadline is going to be the new mental model of the server/client boundaries. if you've got a big app that your team is working on and you aren't intimately familiar with where those boundaries got drawn by your team, you're bound to do some client logic in the wrong spot and then spend an hour hunting it down.

if RW can detect the common scenarios where the boundaries have been incorrectly crossed and let the dev know, it would make RSC easier to digest compared to other frameworks.

Detailed proposal

Here an incomplete list of potential scenarios that may be detectable by the compiler or a linter along with questions for discussion and ideas for a readable error message

• a server component uses useState
  • err msg: Counter.tsx used useState on the server. If this is meant to be a client component prepend a 'use client' to the component.
  • is it safe to assume that any hook on the server is a bad idea? can the compiler detect any hook and throw a error?
  • should this be a warning or an error? i'm leaning toward error

that's all i've got for now 😅 . i'm guesiing there are other foot guns here, i just don't know what they are. thoughts?

Are you interested in working on this?

• I'm interested in working on this

[ahaywood]

CC: @Tobbe

[pantheredeye]

I like this thought. Especially for dev ex. and new dev ex.