Vite-SSG + NuxtUI: `ReferenceError: document is not defined`

[OrbisK]

Environment

System: OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat) CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz Memory: 29.05 GB / 62.58 GB Container: Yes Shell: 5.9 - /usr/bin/zsh Binaries: Node: 23.5.0 - ~/.nvm/current/bin/node npm: 10.9.2 - ~/.nvm/current/bin/npm pnpm: 8.15.9 - ~/.nvm/current/bin/pnpm bun: 1.1.42 - ~/.nvm/current/bin/bun Browsers: Chrome: 130.0.6723.69

Is this bug related to Nuxt or Vue?

Vue

Version

3.2.0

Reproduction

https://github.com/OrbisK/vite-ssg-nuxt-ui-reproduction

1. pnpm install && pnpm build

Description

✓ 558 modules transformed.
.vite-ssg-temp/o5d4vm833a/assets/style-B8cS4vCq.css  113.21 kB
.vite-ssg-temp/o5d4vm833a/main.mjs                   336.28 kB
✓ built in 970ms
file:///home/robin/WebstormProjects/nuxt-ui-vite-ssg/.vite-ssg-temp/o5d4vm833a/main.mjs:9959
    const style = document.createElement("style");
                  ^

ReferenceError: document is not defined
    at file:///home/robin/WebstormProjects/

Additional context

No response

Logs

[OrbisK]

I am not sure, if import.meta.client should be true here:

https://github.com/nuxt/ui/blob/a813ea700e139e6b1de7a68da891b7d1ed079dc4/src/runtime/plugins/colors.ts#L52

[OrbisK]

not sure if we need: if (import.meta.client && !import.meta.env.SSR && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) { instead. Or: if (import.meta.client && import.meta.env.VITE_SSG !== 'true' && nuxtApp.isHydrating && !nuxtApp.payload.serverRendered) {.

But I wonder if this is expected behavior of vite-ssg.

[OrbisK]

related: https://github.com/antfu-collective/vite-ssg?tab=readme-ov-file#how-to-allow-rollup-tree-shake-your-client-code ?

[OrbisK]

maybe this is related too: https://github.com/nuxt/nuxt/issues/32581

[sandros94]

maybe this is related too: nuxt/nuxt#32581

I do feel this is indeed related more upstream as @danielroe was referring in https://github.com/nuxt/nuxt/issues/32581#issuecomment-3058601669

this might be related to a nitro or rollup update instead of a nuxt change ...

and I also remember that removing !import.meta.env.SSR will lead to various errors, tho I don't remember them atm (so I might be wrong)

[github-actions[bot]]

Hi! 👋 This issue has been open for 60 days without activity and will be closed in 7 days. Please comment if it's still relevant.

[OrbisK]

still relevant

[github-actions[bot]]

Hi! 👋 This issue has been open for 60 days without activity and will be closed in 7 days. Please comment if it's still relevant.

[OrbisK]

still relevant (tested with latest)

[benjamincanac]

@Barbapapazes Is your fix in https://github.com/nuxt/ui/pull/5347 related? 🤔

[Barbapapazes]

@Barbapapazes Is your fix in #5347 related? 🤔

Yes, my PR fixes exactly this bug!

[Barbapapazes]

@OrbisK, give a try to #5347, it should fix your issue!

[Barbapapazes]

cc @thetutlage (pinging you so you leave a heart on one of the comments). The fix should allow you (I'm not sure if import.meta.env.SSR is injected when using Vite in middleware mode) to use Nuxt UI with Adonis + Inertia.js SSR.

[thetutlage]

@Barbapapazes Thanks for the ping. I can surely give it a try and see if Vite in middleware mode sets that env variable or not

[Barbapapazes]

@Barbapapazes Thanks for the ping. I can surely give it a try and see if Vite in middleware mode sets that env variable or not

Oops, I just realized that it won't work for Inertia, https://github.com/nuxt/ui/pull/5396

[benjamincanac]

I've just merged #5396, can we close this?

[OrbisK]

https://github.com/nuxt/ui/pull/5396 fixed it