ssr : false - server still tries to render components

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.<anonymous> (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.<anonymous> (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.<anonymous> (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.<anonymous> (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.<anonymous> (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® Core™ 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.

[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?

[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)}
/>