Global variable not preserved in app directory on hot/full reload (dev mode)

[eashish93]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #22 SMP Tue Jan 10 18:39:00 UTC 2023
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: 7.1.0
    Relevant Packages:
      next: 13.4.9-canary.0
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/unruffled-meadow-88lfjk

To Reproduce

Try this in any page.js|tsx file:

console.log('Global Test: ', global._foo);
if(!global._foo) {
  global._foo = 'hello';
  console.log('Initializing global variable');
}

Describe the Bug

Global variable not preserving on app directory and app route handler. Working fine on pages directory. On full/hot reloading multiple times the above page.tsx it's printing undefined every time.

Expected Behavior

On hot/full reloading multiple times, it should log pattern like this:

// print-1
Global Test: undefined
Initializing global variable

// print-2
Global Test: hello

// print -3 
Global Test: hello

Which browser are you using? (if relevant)

Chrome 114

How are you deploying your application? (if relevant)

No response

_NEXT-1402

[zerosym]

I'm seeing this as well. It's possible that it's the underlying cause of a bigger headache -- that the dev server just hangs after navigating to/compiling a certain number of routes. I suspect this is due to the exhaustion of connections to the database I'm using.

Dev server hanging issue: https://github.com/vercel/next.js/issues/10061#issuecomment-1293639510 https://github.com/vercel/next.js/issues/10061#issuecomment-1616037310

[balazsorban44]

@zerosym sounds unrelated. That's a very old issue though, might be worth opening a new one with a minimal(!) reproduction instead.

[eashish93]

@balazsorban44, It's related to dev server hang and you can try it with mongodb example or with firebase auth (app dir). Works fine witb pages dir though and no server hang.

[zerosym]

@balazsorban44 Old discussion thread that shows how persistent globals and database connection issues (which I believe cause at least some of the dev server hangs) are intertwined:

https://github.com/vercel/next.js/discussions/26427#discussioncomment-4796502

The comment I linked to points out that the issue still occurs with next13's appdir, but then goes on to say that using globalThis fixes that, a solution which is no longer working. Seems like every request triggers compilation in a new process? At least that's what it looks like when logging statements.

For example:

{"level":30,"time":1688654748166,"pid":127,"hostname":"example","app":"web","msg":"Initializing service: client -- already exists? no"}
{"level":30,"time":1688654748365,"pid":134,"hostname":"example","app":"web","msg":"Initializing service: client -- already exists? no"}

[controversial]

Same issue as #47099 i think

[nanzm]

The same problem occurring will result in too many database connections.

[joewhatkins]

We're getting the same issue, app directory with Prisma. No combination of global, globalThis, etc, cacheing of the PrismaClient seems to work for us.

[nanzm]

Is there any update?

[nanzm]

https://github.com/vercel/next.js/issues/45483

[alexdelgado]

+1 I'm also running into this issue myself and globalThis doesn't work

[hungcung2409]

@balazsorban44 Old discussion thread that shows how persistent globals and database connection issues (which I believe cause at least some of the dev server hangs) are intertwined:

#26427 (comment)

The comment I linked to points out that the issue still occurs with next13's appdir, but then goes on to say that using globalThis fixes that, a solution which is no longer working. Seems like every request triggers compilation in a new process? At least that's what it looks like when logging statements.

For example:

{"level":30,"time":1688654748166,"pid":127,"hostname":"example","app":"web","msg":"Initializing service: client -- already exists? no"}
{"level":30,"time":1688654748365,"pid":134,"hostname":"example","app":"web","msg":"Initializing service: client -- already exists? no"}

In my case, the workaround solution does not work anymore