Can't avoid crash when trying to discriminate between build environment and client side.

    "vue": "3.2.25",
    "vite": "2.8.0",
    "vite-ssg": "0.19.2",

I have a dialog that has a dependency on @a11y/focus-trap which is a web component. As it is a web component, it uses stuff like document.createElement(‘template’). So I need to prevent it from being imported during SSG.

I tried 2 solutions without success :

1. Test window presence with dynamic import

if (window) {
  import('@a11y/focus-trap')
}

Leads to the following error:

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
file:///Users/doe/Projects/front/.vite-ssg-temp/main.mjs:63
if (window) {
^

ReferenceError: window is not defined
    at file:///Users/doe/Projects/front/.vite-ssg-temp/main.mjs:63:1
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.build (/Users/doe/Projects/front/node_modules/vite-ssg/dist/chunks/build.cjs:171:87)
    at async Object.handler (/Users/doe/Projects/front/node_modules/vite-ssg/dist/node/cli.cjs:25:3)

1. Use ClientOnly

Which is the only way in the documentation to prevent running code in SSG. I used it around all usage of the dialog component that does the import. Sadly it doesn’t change anything.

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
file:///Users/doe/Projects/front/.vite-ssg-temp/main.mjs:466
const template = document.createElement("template");
                 ^

ReferenceError: document is not defined
    at file:///Users/doe/Projects/front/.vite-ssg-temp/main.mjs:466:18
    at ModuleJob.run (node:internal/modules/esm/module_job:183:25)
    at async Loader.import (node:internal/modules/esm/loader:178:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:437:15)
    at async Object.build (/Users/doe/Projects/front/node_modules/vite-ssg/dist/chunks/build.cjs:171:87)
    at async Object.handler (/Users/doe/Projects/front/node_modules/vite-ssg/dist/node/cli.cjs:25:3)

It would be nice to have an identified solution in the documentation to prevent code from running during SSG.

[userquin]

@earlAchromatic if you want to also use apollo with vite-ssg I have also a patch for it, just check https://github.com/userquin/vitesse-stackter-clean-architect, from #241

[earlAchromatic]

@userquin Nice work! Thank you taking a deep dive into it. Patch script is great 😄