Referencing Component inside getServerSideProps breaks build (Next.js 12)

What version of Next.js are you using?

12.0.3

What version of Node.js are you using?

16.6.1

What browser are you using?

Chrome, Firefox

What operating system are you using?

macOS

How are you deploying your application?

Doesn’t matter

Describe the Bug

After upgrading my project to Next.js 12 the generated builds are not correct. I’ve identified the following issue:

If a component is referenced inside getServerSideProps as shown below the generated build is incorrect and gives client side errors. This issue didn’t happen on Next 11.

import { ComponentFoo } from "../components/ComponentFoo";

export default function Home() {
  return (
    <div>
      <ComponentFoo />
    </div>
  );
}

export function getServerSideProps() {
  return {
    props: { foo: ComponentFoo.fragments.foo },
  };
}

I’ve created a minimal reproduction here which is deployed on vercel here.

Basically the error is that the generated build for the client is not including the component definition. See comparison . Referencing the component from inside getServerSideProps:

Not referencing the component from inside getServerSideProps:

This is generating a ComponentFoo is not defined error when rehydrating on the client.

Reason why I’m referencing the components: I attach GraphQL fragments to the components specifying the data they need to render. When calling getServerSideProps I need to reference those fragments in order to fetch the necessary data.

Expected Behavior

I would it expect to work. The same way it worked on Next 11.

To Reproduce

Minimal reproduction: https://github.com/santialbo/test-next-build Vercel deployment: https://test-next-build.vercel.app/

[balazsorban44]

Hi, this has been fixed and is working now, just tested with 12.0.8. Please upgrade.

[benknight]

Thank you for reporting this issue. I am experiencing exactly the same problem after updating to version 12.

I am using the same pattern as OP where I’m defining GraphQL fragments as fields on my exported components.