Unwanted code elimination when using a component in getStaticProps

[amannn]

What version of Next.js are you using?

12.0.4

What version of Node.js are you using?

v14.15.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Describe the Bug

I'm encountering a runtime error, since Next.js seems to be eliminating a component from a function where it is needed.

It seems to occur when a component is used both on the page and in getStaticProps.

function PageLayout({children}) {
  return <div style={{background: 'gray'}}>{children}</div>;
}

export default function Index() {
  // ReferenceError: PageLayout is not defined
  return <PageLayout>Index</PageLayout>
}

export function getStaticProps() {
  // When this line is removed, the page no longer breaks
  console.log(PageLayout.name);
  
  return {
    props: {}
  };
}

Note that the example is intended to be minimal, in my application the usage of the layout component in getStaticProps serves a meaningful purpose. In Next.js 11 the above code works flawlessly.

Expected Behavior

No runtime error

To Reproduce

1. Clone https://github.com/amannn/next-compile-bug
2. Follow the reproduction steps in the README

[ljosberinn]

iirc getStaticProps etc. are destructured from the page during build and then executed outside of it, not ran directly within the file and thus lose context to anything thats not an import thats exclusively used within the fn. I believe this is intended.

[amannn]

Thanks for the reply! I also think Next.js has some compile-time features to get rid of imports that are only used for data fetching functions and the page entry component when building the respective bundles.

However since PageLayout is used both on the page and in getStaticProps it should be available to both, right? In this case it is missing in the page bundle.

I guess the compiler has a feature to mark local variables as used for a given bundle but has a bug in detecting this case?

[ljosberinn]

Possibly, I thought this would be already covered somewhere here.

[balazsorban44]

Could you please explain the meaningful purpose?

[amannn]

Sure: I'm using this approach to build up a recursive dependency list of i18n message namespaces that can be used to only include the minimum of messages per page: https://github.com/amannn/next-intl/blob/1571b78688fa2735011b2170e7811e83fd574204/packages/example/src/pages/index.tsx#L24-L40.

The linked code works in Next.js 12, because I introduced the assignment to Index.messages. If L29 is removed and you'd pass the array directly to to pick in L36, the bug would occur.

A very similar use case which I haven't yet tried out with Next.js 12 is the composition of GraphQL fragments that are attached to a static property on a component.

Does that help?

[pveyes]

Upon investigating further, this is a regression in the swc-based compiler. If you add babel.config.js to disable SWC, the code works even in latest next.js version (12.0.7)

Here's a repro with swc disabled https://github.com/pveyes/next-swc-ssg-code-elimination

[pveyes]

I'm not confident with my rust skill, so I just created a draft PR as a proof of concept. The test is very basic (only covers JSXElement AST)

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.