Rule to forbid component dot notation?

[FezVrasta]

Hi, with server components the component dot notation (Group.Foo) is not supported, it would be useful to have an eslint rule that forbids its usage to avoid issues like the one described here:

vercel/next.js#51593 (comment)

The React error is:

Cannot access .Foo on the server. You cannot dot into a client module from a server component. You can only pass the imported name through.

[ljharb]

This is a confusing requirement and seems very unidiomatic for JS. Is it coming from next.js or from actual React RSC? If the latter, can you find a react issue where it's discussed?

[FezVrasta]

From what I see it's coming from React itself. I'll dig further and get back to you

[FezVrasta]

It comes from React:

https://github.com/facebook/react/blob/main/packages/react-server-dom-webpack/src/ReactFlightWebpackReferences.js#L190

[ljharb]

Then I think it's incumbent on the React team to provide a canonical way to statically determine if a component is server or client. This can be a library (best), or an algorithm or heuristics to use (but in this case, they'd basically never be able to change them).

[FezVrasta]

To be fair I would be okay with a rule that forbids them all the time. I wouldn't want to mess with refactors in case a component has to be moved from server to client.