Next.js Discord

Discord Forum

Detecting invalid server components in CI?

Unanswered
Canaan Dog posted this in #help-forum
Open in Discord
Canaan DogOP
I just ran into an interesting problem at work. We have CI that ensures the app builds, types compile, etc. We accidentally made an invalid client component, but the build passed. We only detected the issue after merging.

My question is: Is there a way to pre-check for incorrect server components in CI?

3 Replies

jason
Just for clarification, did you mistakenly mark a server component with use client?

If this is the case, check out a potential solution from the docs: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#keeping-server-only-code-out-of-the-client-environment

which would require you to run:
npm install server-only


and then add this import to components/files that you want to keep as server only:
import 'server-only'


Adding this should error out in the build process.
Canaan DogOP
No, the opposite unfortunately. 
Unhandled Runtime Error
React Context is unavailable in Server Components

For this component
export const Providers: FC<PropsWithChildren> = ({ children }) => {
  return (
    <SessionProvider>
      <ApolloWrapper>
        {children}
      </ApolloWrapper>
    </SessionProvider>
  );
};

This is just SessionProvider not having use client, but the issue is only detected at runtime.
jason
Hmm, I'll be honest I'm not sure, but personally what I like to do is to mark all components with either 'use client' or import 'server-only'.

I know by default with the app router, all components are server components, but can't hurt to be safe haha.