Exported members that are used in SSR/SSG/ISG page function are undefined on the client (Attempted import error: '..' is not exported from '..' (imported as '..').)

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

16.13.1

What browser are you using?

Chrome Version 96 (Official Build) (64-bit)

What operating system are you using?

Ubuntu 20.04 via WSL 2 & Windows 10

How are you deploying your application?

next start

Describe the Bug

When you export a member that is used in the page function of getStaticProps, it will be undefined on the client.

For example:

// pages/index.tsx
export const revalidateInSeconds = 5 * 60;

export const getStaticProps: GetStaticProps = async () => {
  return {
    props: {},
    revalidate: revalidateInSeconds,
  };
};

// components/TestComponent.tsx
import { revalidateInSeconds } from "../pages";

export function TestComponent(): JSX.Element {
  console.log("revalidateInSeconds: ", revalidateInSeconds);
  return <p>Test component</p>;
}

Expected Behavior

Exported variables shouldn’t be undefined on the client.

To Reproduce

Reproduction repo

I created a reproduction repo for this bug:

https://github.com/bennettdams/nextjs-bug-export-undefined

1. git clone [e-mail]:bennettdams/nextjs-bug-export-undefined.git
2. npm i
3. npm run build
4. npm run start

OR

Manual reproduce

1. Create Next.js app: npx create-next-app@latest --use-npm --ts .
2. Add getStaticProps and a const to export:

export const revalidateInSeconds = 5 * 60;

export const getStaticProps: GetStaticProps = async () => {
  return {
    props: {},
    revalidate: revalidateInSeconds,
  };
};

1. Add a test component that logs the imported const (revalidateInSeconds) and use the component on the page:

// components/TestComponent.tsx
import { revalidateInSeconds } from "../pages";

export function TestComponent(): JSX.Element {
  console.log("revalidateInSeconds: ", revalidateInSeconds);
  return <p>Test component</p>;
}

// pages/index.ts
...
  <main className={styles.main}>
        <TestComponent />

        <h1 className={styles.title}>
          Welcome to <a href="https://nextjs.org">Next.js!</a>
...

1. Build & start the app: npm run build & npm run start

Results, looking at the console logs

Terminal that is used for building:

Click for text!

> next build

info  - Checking validity of types  
info  - Creating an optimized production build  
warn  - Compiled with warnings

./components/TestComponent.tsx
Attempted import error: 'revalidateInSeconds' is not exported from '../pages' (imported as 'revalidateInSeconds').

Import trace for requested module:
./pages/index.tsx

info  - Collecting page data  

Browser:

---

Additional information:

• When you run npm run dev instead of using the build, you can see that the console.log on the server actually has the value, instead of being undefined: Just on the client it is still undefined.

• I checked this behavior also for Next.js v11.1.2 - there, it is not happening. The variable has its value on the client as expected.

[andtos90]

Can confirm it’s still happening to me with Next 12.1.5 (latest version available). I noticed that adding a console log right after the export fix the issue, for example:

export const revalidateInSeconds = 5 * 60;
console.log(revalidateInSeconds);

export const getStaticProps: GetStaticProps = async () => {
  return {
    props: {},
    revalidate: revalidateInSeconds,
  };
};

[balazsorban44]

This sounds like an edge-case in my opinion, but here is what I’ve found.

You have multiple options that might make more sense in this case, and would work as intended after testing with your reproduction.

1. The TestComponent being used in the same page file could receive the variable as a prop, so you wouldn’t need to export it and import it somewhere else.

2. Use an environment variable to share information that is used both client and server-side. Even if it’s not a secret, you might want to be mindful about exposing any values being used server-side, so something like process.env.NEXT_PUBLIC_REVALIDATE could make this more explicit

3. Define the value in a separate config file, that both the component file and the page file import. This way Next.js won’t cut out the value being imported in the component file that’s used in a client bundle.

I checked and indeed this works with Babel, so this is SWC related indeed, but also might be the more correct solution. Let me check with the team!