[Bug Report] navigator is not defined about vite-ssg

[userquin]

@YunYouJun vitejs/vite#1791 (comment)

[userquin]

@YunYouJun use typeof window !== 'undefined' instead, on SSR/SSG navigator is not defined.

See #21 (comment)

[YunYouJun]

@YunYouJun use typeof window !== 'undefined' instead, on SSR/SSG navigator is not defined.

See #21 (comment)

In fact, I tried to do it, but it didn't work either. （typeof window !== 'undefined'）

[userquin]

@YunYouJun I'll take a look at your repo...

[YunYouJun]

@YunYouJun I'll take a look at your repo...

Thanks, main file is https://github.com/YunYouJun/web-resume/blob/main/src/pages/editor.vue.

[userquin]

@YunYouJun what are you using npm, pnpm or yarn? There is no lock file on your repo...

[YunYouJun]

@YunYouJun what are you using npm, pnpm or yarn? There is no lock file on your repo...

Because lockfile is large and it is not a project that requires a fixed dependency, I ignored the lock file.

Yarn or pnpm is OK, I'm currently using pnpm.

[userquin]

@YunYouJun I have your repo build working:

Change serve script with: "serve": "vite preview" (remove the hyphen).

Change src/pages/editor.vue just remove import * as monaco from 'monaco-editor' and onMounted configure this:

onMounted(async() => {
  const txt = await useResume(route.query.url as string)
  resumeTxt.value = txt
  console.log(txt)
  if (typeof window !== 'undefined' && container.value) {
    const monaco = await import('monaco-editor')
    monaco.editor.create(container.value, {
      value: resumeTxt.value,
      language: 'yaml',
      theme: 'vs-dark',
      wordWrap: 'on',
    })
  }
})

Since we are using monaco editor we need to change rollup options on vite config file: on SSG build the monaco dep will go to the temporary main.js (5MB) (the entry point for vite-ssg for build) and then will fail, since there is some usage to detect browser:

// vite.config.ts
...
...
import path from 'path'

const prefix = 'monaco-editor/esm/vs'
// import yaml from '@rollup/plugin-yaml'

// https://vitejs.dev/config/
export default defineConfig({
  resolve: {
...
...
  build: {
    rollupOptions: {
      output: {
        inlineDynamicImports: false,
        manualChunks: {
          jsonWorker: [`${prefix}/language/json/json.worker`],
          cssWorker: [`${prefix}/language/css/css.worker`],
          htmlWorker: [`${prefix}/language/html/html.worker`],
          tsWorker: [`${prefix}/language/typescript/ts.worker`],
          editorWorker: [`${prefix}/editor/editor.worker`],
        },
      },
    },
  },

  // https://github.com/antfu/vite-ssg
  ssgOptions: {
    script: 'async',
    formatting: 'minify',

[YunYouJun]

It works. Thank you very much!

[YunYouJun]

Is it possible for us to do this automatically with vite-ssg? For example, detects the 'worker .js' suffix name when packaging.

[userquin]

@YunYouJun the problem is that we don't know if the worker is pre-bundled or not so the problem is on the user land, we cannot assume all workers requires pre-bundle them and of course how to do it ;).

[YunYouJun]

Okay, I see.