search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.66k stars 26.61k forks source link

Side-effect-only client imports do not run on server side #60404

Open wintercounter opened 8 months ago

wintercounter commented 8 months ago

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/white-sky-synrgh?file=%2Fapp%2Flayout.tsx%3A1%2C19

To Reproduce

  1. Run the app
  2. Check layout.tsx loading global.ts without any modules imported.
  3. Code defined in global.ts does not log anything.

Current vs. Expected behavior

console.log should be executed on server side. It is only executed if I actually define a module, load it, and use it in my layout.

For example, add the following to global.ts:

export default () => null

Use the module in layout.tsx:

import NoOp from './global'

...
<NoOp />
...

The above will make it work.

Verify canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #1 SMP Thu Oct 5 21:02:42 UTC 2023
Binaries:
  Node: 18.18.1
  npm: 9.8.1
  Yarn: 1.22.19
  pnpm: N/A
Relevant Packages:
  next: 14.0.3
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

ianujvarshney commented 8 months ago

i go through this issue i checked that when i am running this global.ts without use client it means on server side its running fine but we run this issue on client side it's not working. after that i used on client side a module and export this and use on layout.tsx. console.log is working fine on client side. How it possible if this should not worked on client side also should not work on server side without any module.