Open jakobo opened 10 months ago
In case others come across this, a (partial) workaround is the 3rd party plugin eslint-plugin-react-server-components, which can catch some situations where client-side operations are included without the "use client"
directive.
Link to the code that reproduces this issue
https://github.com/jakobo/next-allowed-compile-rsc
To Reproduce
pnpm lint
pnpm build
pnpm start --port 3000
, wait for server starthttp://localhost:3000/a
Current vs. Expected behavior
Expected
"use client"
directive (/app/[id]/client.tsx
)"use client"
directive (/app/[id]/client.tsx
)Actual
500
Verify canary release
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, ESLint (eslint-config-next)
Additional context
This bug seems to have existed since the original next.js release of React Server Components (13.0.0). We uncovered it during an experiment where a server component called in to an image component with the
onError
property set. While we caught the runtime error, we were surprised that none of thenext build
ornext lint
steps caught the error.It does fail correctly when we remove the
"use client"
directive from the top levelclient.tsx
file, but it does not provide the same checks for[id]/client.tsx
, making it unclear if this is a build or linting concern.