Unused Server-Only Dynamic Import Inside `typeof window === 'undefined'` Causes Error

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

$ npx --no-install next info

    Operating System:
      Platform: linux
      Arch: x64
      Version: #112-Ubuntu SMP Thu Feb 3 13:50:55 UTC 2022
    Binaries:
      Node: 14.18.1
      npm: 6.14.15
      Yarn: 1.22.17
      pnpm: N/A
    Relevant packages:
      next: 12.1.6-canary.9
      react: 18.0.0
      react-dom: 18.0.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Hi there! First of all, thanks for your continued effort on Next.js! 🙌 Really amazing framework.

Importing a client-only function in a Next.js page causes bundling of the server-only code contained within the typeof window === 'undefined' check:

// pages/index.js
import { usedClientExport } from "../util/shared";

export default function IndexPage() {
  usedClientExport();
  return <div>Hello World</div>;
}

// util/shared.js
export async function unusedServerExport() {
  if (typeof window === "undefined") {
    await import("fs");
  }
}

export function usedClientExport() {
  console.log("yay");
}

Error:

./util/shared.js:3:10
Module not found: Can't resolve 'fs'
  1 | export async function unusedServerExport() {
  2 |   if (typeof window === "undefined") {
> 3 |     await import("fs");
    |          ^
  4 |   }
  5 | }
  6 | 

Sandbox: https://codesandbox.io/s/recursing-lalande-k3w986?file=/util/shared.js

cc @balazsorban44 @sokra

Expected Behavior

1. Any unused functions (in my example, unusedServerExport) are removed using tree shaking or dead code elimination and not included in the client bundle
2. Any code in typeof window === 'undefined' is not included in the client bundle
3. No errors appear for any code that will not be included in the bundle (in either of 1 or 2)

To Reproduce

https://codesandbox.io/s/recursing-lalande-k3w986?file=/util/shared.js

‼️ This also occurs when using Babel instead of SWC:

https://codesandbox.io/s/unruffled-fire-jrkz7x?file=/pages/index.js (also here on StackBlitz: https://stackblitz.com/edit/nextjs-wmguir?file=pages%2Findex.js)

Potentially Related Issues

• #30892
• #33791

[timneutkens]

Seems the main difference between the Babel/SWC approach is that the Babel transform we used to transform typeof window actually evaluates the expression and inlines the result whereas with the SWC transform it doesn’t evaluate it:

// util/shared.js
export function unusedServerExport() {
  if (typeof window === "undefined") {
    import("fs");
  }
}

export function usedClientExport() {
  console.log("yay");
}

Result with SWC:

// util/shared.js
export function unusedServerExport() {
    if ("object" === "undefined") {
        import("fs");
    }
}
export function usedClientExport() {
    console.log("yay");
}

Result with next/babel:

// util/shared.js
export function unusedServerExport() {
    if (false) {
        import("fs");
    }
}
export function usedClientExport() {
    console.log("yay");
}

[karlhorky]

Ok, maybe the .server.js / .client.js convention is something to adopt for non-React code then too, at least with Next.js apps, for now.

We’ll also try out the hacky-feeling workaround to see if this is any more ergonomic.