Same module is being loaded at least twice

[punkpeye]

Note

I understand why this would happen it development build. But this issue describes production setup.

I am using react-router with Fastify, i.e. Fastify simply loads the react-router build:

const serverBuild = (await import(
  '../../../build/server/_virtual/server-build'
)) as ServerBuild;

There is a file that's imported by Fastify entry script, but also referenced inside react-router project (app/services/shutdownHandler.server.ts). The contents of this file is:

import { createShutdownHandler } from '#app/factories/createShutdownHandler';

console.log('SHUTDOWN HANDLER', globalThis.foo);

globalThis.foo = 'bar';

export const shutdownHandler = createShutdownHandler();

What I would expect is that when the program starts, I should see log:

SHUTDOWN HANDLER undefined
CREATE SHUTDOWN HANDLER

and that's it. ("CREATE SHUTDOWN HANDLER" is printed when the createShutdownHandler is invoked).

What actually is happening is this:

SHUTDOWN HANDLER undefined
CREATE SHUTDOWN HANDLER
SHUTDOWN HANDLER bar
CREATE SHUTDOWN HANDLER

Notice that the second time SHUTDOWN HANDLER is printed, globalThis.foo is no longer undefined but set to "bar".

So somehow, the same module is being imported multiple/executed multiple times when it is shared this way between Fastify entry script and the react-router.

It is a major issue since it basically means that shutdownHandler is not shared between the two.

I worked around by storing shutdownHandler in globalThis, but flagging as a bug.

[punkpeye]

Finally figured it out.

What gave it away is adding these logs:

import { shutdownHandler } from '#app/services/shutdownHandler.server';

// ...

console.log('loading bundle...');
const serverBuild = (await import(
  '../../../build/server/_virtual/server-build'
)) as ServerBuild;
console.log('loaded bundle');

Logs:

SHUTDOWN HANDLER
CREATE SHUTDOWN HANDLER

loading bundle...
SERVER ENTRY
SHUTDOWN HANDLER
CREATE SHUTDOWN HANDLER
loaded bundle

which then clicked... because I am importing the same file #app/services/shutdownHandler.server in the script that imports Vite production build, the build actually has a copy of shutdownHandler.server inside the bundle that will be executed as soon as the bundle is imported.

Super unintuitive, but makes sense.

You need to use globalThis if you want only a single instance (or use an abstraction like @epic-web/remember).

[gustavopch]

It is loaded exactly twice. When your server module imports #app/factories/createShutdownHandler, it imports the actual file in your file system, but when the code bundled by Vite imports #app/factories/createShutdownHandler, it imports a copy of that file produced by Vite.

Here's an explanation of the problem: remix-run/remix#9790 (comment), and here's a workaround: remix-run/remix#9790 (reply in thread).