ssr : false - server still tries to render components

[printfhere]

Describe the bug
I can't use libraries like Quill which manipulates the DOM outside of onMount function when ssr : false

Logs
18:53:37 [vite] Error when evaluating SSR module C:\Users\Bastien\Desktop\svelte-spa\src\routes\index.svelte:
ReferenceError: document is not defined
at Object. (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:7661:12)
at webpack_require (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:36:30)
at Object. (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:1030:1)
at webpack_require (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:36:30)
at Object. (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:5655:14)
at webpack_require (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:36:30)
at Object. (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:10045:13)
at webpack_require (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:36:30)
at Object. (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:11557:18)
at webpack_require (C:\Users\Bastien\Desktop\svelte-spa\node_modules\quill\dist\quill.js:36:30)

To Reproduce

• Fresh install of sveltekit.
• ssr : false in config
• npm install Quill for exemple
• import Quill as top level of component
• npm run dev -> broken
• npm run build -> broken

Expected behavior
I understood I would not need to code my app as isomorphic when using ssr : false

Information about your SvelteKit Installation:

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit --binaries --browsers
  System:
  OS: Windows 10 10.0.19041
  CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Memory: 2.36 GB / 7.73 GB
  Binaries:
  Node: 14.4.0 - ~\scoop\apps\nodejs\current\node.EXE
  npm: 6.14.5 - ~\scoop\apps\nodejs\current\npm.CMD
  Browsers:
  Chrome: 89.0.4389.90
  Edge: Spartan (44.19041.423.0), Chromium (89.0.774.63)
  Internet Explorer: 11.0.19041.1
  npmPackages:
  @sveltejs/kit: next => 1.0.0-next.64
  svelte: ^3.29.0 => 3.36.0
• Your browser
  Brave
• Your adapter (e.g. Node, static, Vercel, Begin, etc...)
  tested on node and static , both not working

Severity
I still can use classic onMount and if browser conditions.

[Rich-Harris]

SvelteKit needs to import the page to determine whether or not it should be server-rendered. (I'd like to add a build step that figures that out earlier on, so that the component doesn't need to be imported at runtime if it's not being SSR'd, but it won't solve the problem.)

For that reason, you have two options:

1. Raise this as a bug with Quill, because it is a bug — it should be possible to import a DOM-centric library in a non-DOM environment, even if it doesn't do anything
2. use await import('quill') in onMount

[benmccann]

SvelteKit has both app-wide configuration and page-level configuration for SSR. I wonder if there's a way we can avoid importing the page is the app-level config option is set?

[printfhere]

Hey thanks for your answers !

If I understand correctly, the issue comes from librairies that manipulates the DOM as soon as imported.

In that case I should import these kind of dependencies in onMount to prevent sveltekit from evaluating them in a non DOM env.

Sveltekit needs to import the page in order to determine if it should be ssr'd so any library using the DOM at import will cause a bug.

I'll try to raise an issue on Quill side then !

[aberndtiteratec]

In case someone faces a similar issue: the browser variable coming from svelte-kits $app/env might also help to solve it.
https://kit.svelte.dev/docs#modules-$app-env

[ranjanified]

Today even I ran into this... I am trying to use svelte-quill library. When I tried import {quill} from 'svelte-quill/index.esm' at the top-level, it balked with document not defined. I am going to try to use import(...) inside onMount now.

In their example, they have asked to use following way...

<div class="editor" use:quill={options} on:text-change={e => content =
e.detail}/>

... and I'm not sure how will I make that use work from inside onMount.

When I looked-up here, svelte-quill, there is no mention of repository, sadly.

---

So I had to do this to make it work...

onMount(async () => {
  const editor_host = document.querySelector('#description-editor');
  if (editor_host) {
    const { quill } = await import("svelte-quill");
    quill(editor_host, quill_options);
  }
});

... and then in the template

<div
    id="description-editor"
    class="editor"
    on:text-change={(e) => (quill_content = e.detail)}
/>

[symbolicsorcerer]

Apologies if this is the wrong place, but I'm importing a library in a similar way with:

    const { MicVAD, utils } = await import("@ricky0123/vad-web")

And I'm seeing a 404 in the vite process:

Error: Not found: /node_modules/@ricky0123/vad-web/src/real-time-vad.ts

Reading the vite docs, it sounds like it should be hitting /.vite/node_modules, and that vite will automatically rewrite the URL. Is it possible this package is improperly configured somehow?