Vite 4.2 causes change in SSR behaviour

[acurrieclark]

Describe the bug

Since the update to vite 4.2, it seems that the way modules are loaded with SSR has changed.

In the attached example, the +layout.svelte file contains a guard so that it is only rendered on the client. The relevant +page.svelte includes an import to a 3rd party module which uses window. This is obviously not present for SSR.

On Vite 4.1 the guard prevents the page from being rendered and so the offending module is never loaded.

On Vite 4.2 the module is loaded regardless.

Reproduction

A reproduction of the issue can be found at https://github.com/acurrieclark/vite-ssr-error

To reproduce:

• Clone the repo
• npm i
• npm run dev
  The error will be triggered

Then downgrade vite to 4.1.4 and repeat the above steps.

Logs

Internal server error: window is not defined

System Info

System:
    OS: macOS 12.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 108.13 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  Browsers:
    Brave Browser: 111.1.49.120
    Edge: 111.0.1661.51
    Firefox: 102.0.1
    Safari: 16.3
    Safari Technology Preview: 16.4
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.0.0 
    @sveltejs/kit: ^1.5.0 => 1.13.0 
    svelte: ^3.54.0 => 3.57.0 
    vite: 4.2.1 => 4.2.1

Severity

serious, but I can work around it

Additional Information

No response

[Star3Lord]

Same, having this problem since I updated dependencies last week. Had to bump down the version to 4.1.4.

[bluwy]

This seem to be the same as vitejs/vite#12483. If you want to import a client-only module, you need to dynamically import it in onMount (FAQ). I don't think wrapping a {#if browser} in the +layout.svelte really worked before.

[acurrieclark]

@bluwy Thanks for the linked issue, I had missed that when I checked.

The {#if browser} wrapped round the slot means that none of the scripts on the child pages are run. With that in place on the top +layout.svelte, any child page could directly (without import) reference window and it would never be called. It's not there to explicitly prevent the imports, although I had hoped it would also have that effect.

I am aware of the onMount trick, but the developer experience is consequently limited, especially in typescript:

1. Dynamic imports require you to separately import types if you want to use them outside the top level, which needs to be done manually as far as I can tell.
2. Stores can only be defined at the top level
3. Any imports you want to use outside the top level will be undefined on page load, so you need to put a further set of guards in place.

If you have a large number of imports which all rely on client side only code, then this is far from enjoyable.

In my specific case, I only need to employ SSR in dev as a workaround for another issue, but I can't imagine I am the only one in this situation.

[bluwy]

Sorry I've missed this in my notifications. I don't think the {#if browser} trick really works from a bundling perspective, you're preventing the children rendering in SSR, but the children route components are still loaded behind-the-scenes, that's why you see the error as the modules are still being loaded.

Aside the "author client-only code" experience, I think the core issue is expected, but in any case if you want to suppress it (not recommended), you can use this Vite plugin:

    {
      name: 'unsafe-hide-ssr-error',
      configureServer(server) {
        const _ssrLoadModule = server.ssrLoadModule;
        server.ssrLoadModule = function () {
          return _ssrLoadModule.apply(this, arguments).catch((e) => {
            if (e.message.includes('window is not defined')) {
              return {};
            }
            throw e;
          });
        };
      }
    }

This should make the page load. You can use configure Vite's logger if you want to suppress the error messages. Closing as wontfix.