Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

isSsrBuild set to false when using ssrLoadModule with vite dev server #15509

Closed
7 tasks done
michaelchiche opened this issue Jan 4, 2024 · 8 comments
Closed
7 tasks done

Comments

@michaelchiche
Copy link

michaelchiche commented Jan 4, 2024

Describe the bug

I have vite.config.ts that needs to know if we are doing an SSR build when using ssrLoadModule.
Currently, it is set to false.

I need to do this because I need to replace global with window using define for CSR.
I cant switch it around, because otherwise, window is not defined in SSR.

I dont know if this is a bug, or if there is a way to set it to true ?

Reproduction

https://stackblitz.com/edit/vitejs-vite-5gkbop?file=README.md

Steps to reproduce

Just open the stackblliz link. You can see that isSsrBuild is set to false.

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 18.18.0 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 9.4.2 - /usr/local/bin/npm
  pnpm: 8.10.5 - /usr/local/bin/pnpm
npmPackages:
  @vitejs/plugin-react: ^4.2.1 => 4.2.1 
  vite: ^5.0.8 => 5.0.10

Used Package Manager

pnpm

Logs

No response

Validations

Copy link

stackblitz bot commented Jan 4, 2024

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

@XiSenao
Copy link
Collaborator

XiSenao commented Jan 5, 2024

When config.build.ssr is specified for Vite, the value of isSsrBuild will be true.

@michaelchiche
Copy link
Author

I forked the example here: https://stackblitz.com/edit/vitejs-vite-fknvqz?file=vite.config.ts, it does not change anything. But I really dont understand why/how this change would change anything...

@XiSenao
Copy link
Collaborator

XiSenao commented Jan 5, 2024

In the vite.config.ts configuration module, determine the value of isSsrBuild. You can configure config.build.ssr in createServer.

vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom',
  base,
  build: {
    ssr: true,
    // ...
  }
});

@michaelchiche
Copy link
Author

michaelchiche commented Jan 5, 2024

In the vite.config.ts configuration module, determine the value of isSsrBuild. You can configure config.build.ssr in createServer.

vite = await createServer({
  server: { middlewareMode: true },
  appType: 'custom',
  base,
  build: {
    ssr: true,
    // ...
  }
});

This forces ALL builds as SSR, as shown here: https://stackblitz.com/edit/vitejs-vite-fknvqz?file=vite.config.ts,src%2FApp.tsx

You can see in th DOM or in the console that the runtime is SSR when it should be CSR

@XiSenao
Copy link
Collaborator

XiSenao commented Jan 6, 2024

oh, I may have misunderstood your issue. Today's schedule is a bit busy, so I may need to come back later to review this issue. I hope someone can help you.

@bluwy
Copy link
Member

bluwy commented Jan 8, 2024

This is expected as the Vite dev server handles client and server code with a single Vite config. In dev and calling ssrLoadModule, it's technically not an "SSR build" too since there's no build. The only way to handle client and server separately is by using a Vite plugin, which provides the ssr flag of whether it's processing the file in SSR or non-SSR code.

One alternative to fixing your issue is to inject a script like globalThis.global = globalThis so that it works in your browser, instead of replacing it in all files. Which should be more accurate and performant.

I'll close this issue for now as it's working as expected. But feel free to continue the conversation if you have more questions.

@bluwy bluwy closed this as not planned Won't fix, can't repro, duplicate, stale Jan 8, 2024
@michaelchiche
Copy link
Author

michaelchiche commented Jan 8, 2024

This is not how you also set import.meta.env.SSR ? This means that is becomes unusable...

@github-actions github-actions bot locked and limited conversation to collaborators Jan 23, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

3 participants