Error when evaluating SSR module (event though SSR is deactivated) : window not defined

[fcrozatier]

Describe the bug

I'm trying to use Ace editor with Svelte but I get a Vite "error when evaluating SSR module" even though I set ssr to false in the components and in the main config. The error says "window not defined" even though I made an "if browser" check in the components that should ensure window is defined. So I'm puzzle as to how to solve this.

Reproduction

• In a fresh kit project, install ace-builds:

npm init svelte@next svelte-ace 
npm i -D @sveltejs/adapter-node@next
npm install ace-builds

• Create an Ace component:
  src/Ace.svelte

<script context="module">
  import { browser } from "$app/env";
  export const ssr = false;
</script>

<script lang="ts">
  import * as ace from "ace-builds/src-noconflict/ace.js";
  import "ace-builds/src-noconflict/mode-python.js";
  import "ace-builds/src-noconflict/ext-language_tools.js";

  import { onMount, createEventDispatcher } from "svelte";

  // Ace has a line-height of 1.33rem;
  const ACE_LINE_HEIGHT = 1.33;
  const dispatch = createEventDispatcher();

  export let defaultValue = "";
  export let options = {};
  export let theme;
  export let lines = 10;
  export let editor = null;

  onMount(() => {
    editor = ace.edit(`editor`);

    // configure
    editor.setTheme(theme);
    editor.session.setMode("ace/mode/python");

    editor.setOptions({ ...options });

    // The optional 1 sets the cursor position to the end. Without it the line is selected
    editor.setValue(defaultValue, 1);

    // Events
    editor.on("change", () => {
      const value = editor.getValue();
      dispatch("change", value);
    });

    return () => {
      if (editor) {
        editor.container.remove();
        editor.destroy();
      }
    };
  });
</script>

{#if browser}
  <div class="editor" style={`height: calc(${lines * ACE_LINE_HEIGHT}rem);`}>
    <div class="editor__wrapper">
      <div id={`editor`} class="editor__main" />
    </div>
  </div>
{/if}

<style>
  .editor {
    --border-radius: 12px;

    border-radius: var(--border-radius);
  }

  .editor__wrapper {
    width: 100%;
    height: 100%;
  }

  .editor__main {
    position: relative;
    height: 100%;
    border-radius: var(--border-radius);
  }
</style>

• Create an ace.svelte route:
  src/routes/ace.svelte

<script context="module">
  import { browser } from "$app/env";
  export const ssr = false;
</script>

<script lang="ts">
  import Ace from "../Ace.svelte";
  import theme from "ace-builds/src-noconflict/theme-cobalt.js";

  let defaultValue = "";
  let lines = 10;

  let options = {
    // Editor options...
  };
</script>

{#if browser}
  <Ace {theme} {defaultValue} {lines} {options} />
{/if}

• Set ssr = false in svelte.config

kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: "#svelte",

    adapter: node(),

    vite: {
      ssr: false,
    },
  },

• Then just run in dev mode and go to the /ace route

Logs

09:51:36 [vite] Error when evaluating SSR module /src/Ace.svelte:
ReferenceError: window is not defined
    at /Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21392:21
    at _require (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:88:37)
    at Object.require (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:93:26)
    at /Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21387:21
    at Object.<anonymous> (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21401:15)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
09:51:36 [vite] Error when evaluating SSR module /src/routes/ace.svelte:
ReferenceError: window is not defined
    at /Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21392:21
    at _require (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:88:37)
    at Object.require (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:93:26)
    at /Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21387:21
    at Object.<anonymous> (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21401:15)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
window is not defined
ReferenceError: window is not defined
    at /Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21392:21
    at _require (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:88:37)
    at Object.require (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:93:26)
    at /Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21387:21
    at Object.<anonymous> (/Users/fcrz/Code/tuto/code-editor/svelte-ace-minimal/node_modules/ace-builds/src-noconflict/ace.js:21401:15)
    at Module._compile (node:internal/modules/cjs/loader:1095:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1147:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)

System Info

System:
    OS: macOS 11.6
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 4.96 GB / 32.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.0.1 - /usr/local/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 96.0.4664.45
    Firefox Developer Edition: 95.0
    Safari: 15.0
  npmPackages:
    @sveltejs/adapter-node: ^1.0.0-next.55 => 1.0.0-next.55 
    @sveltejs/kit: next => 1.0.0-next.196 
    svelte: ^3.42.6 => 3.44.1

Severity

blocking all usage of SvelteKit

Additional Information

I noticed that when the dev command is running and I'm on the /ace route with the error, if I make a slight code modification like changing the default number of lines and then refresh the page, the component appears. But if I restart the dev command the error comes back.

Why is it evaluating in SSR mode when ssr is false?
Why is window not defined when I setup the editor onMount and check if we are in browser?

[dummdidumm]

Duplicate of #1650 . This a known limitation of the current ssr setup and a PR is pending to solve that.
You get an error even when doing your work inside onMount because the library you import accesses the window object upon getting imported already. You could try to work around it by importing it dynamically.

[fcrozatier]

Thanks it works with the dynamic import