Tree shaking for `getStaticProps` not working

What version of Next.js are you using?

10.1.2

What version of Node.js are you using?

12.18.3

What browser are you using?

Firefox

What operating system are you using?

Ubuntu 20.04 LTS (Pop_OS! 20.04 LTS)

How are you deploying your application?

Vercel

Describe the Bug

Tree shaking for getStaticProps doesn’t work properly when re-exporting reusable props functions:

// lib/page.ts
import { GetStaticPathsResult } from 'next';

import { OrgJSON } from 'lib/model/org';
import { getOrgs } from 'lib/api/db/org';

export interface PageProps {
  orgs?: OrgJSON[];
}

export async function getPageProps(): Promise<{ props: PageProps }> {
  const orgs = (await getOrgs()).map((o) => o.toJSON());
  return { props: { orgs } };
}

export async function getPagePaths(): Promise<GetStaticPathsResult> {
  return { paths: [], fallback: true };
}

I then re-export those getPageProps and getPagePaths from that file in my pages:

// pages/[org]/settings/index.tsx
import { getPagePaths, getPageProps } from 'lib/page';
...
export const getStaticProps = getPageProps;
export const getStaticPaths = getPagePaths;

And the getPagePaths and getPageProps aren’t properly tree shaken. They still try to appear in the client-side bundle; I know this because my build fails with the error:

12:15:38.782 | Failed to compile.
12:15:38.783 | ModuleNotFoundError: Module not found: Error: Can't resolve 'fs' in '/vercel/path0/node_modules/winston/dist/winston/transports'
12:15:38.783 | > Build error occurred
12:15:38.784 | Error: > Build failed because of webpack errors
12:15:38.784 | at /vercel/path0/node_modules/next/dist/build/index.js:17:924
12:15:38.784 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:5:584)
12:15:38.880 | Error: Command "yarn run build" exited with 1

That ☝️ error occurs because my API logger (Winston which uses fs which is only available in server-side environments) is being imported into lib/api/db/org.ts which is imported by lib/page.ts which is (incorrectly) not tree shaken by Next.js even though it is only used in getStaticProps.

Expected Behavior

Next.js should tree shake imports that are re-exported as getStaticProps or getStaticPaths (and not include them in the client-side bundle).

To Reproduce

See issue description.

[timneutkens]

Can you share a full reproduction? You can check the tree shaking here: https://next-code-elimination.vercel.app/. Your example of:

import { getPagePaths, getPageProps } from 'lib/page';

export const getStaticProps = getPageProps;
export const getStaticPaths = getPagePaths;

Is correctly shaken from the page file, so it’s likely something else.

A separate module can’t contain both client-side JS and server-side JS as the tree shaking of getStaticProps, getStaticPaths, and getServerSideProps only runs on the page file itself, if you end up doing something like:

import { getPagePaths, getPageProps, SomeComponent } from 'lib/page';

export const getStaticProps = getPageProps;
export const getStaticPaths = getPagePaths;

export default function Home() {
  // Note that SomeComponent is imported from `lib/page` which imports server-only modules like `fs`
  return <SomeComponent />
}

It will not work because the tree shaking only removes the getPagePaths and getPageProps import and does not actually change lib/page.

[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.