Additional data points for SvelteKit

SvelteKit is SSR for Svelte. Svelte is to SvelteKit as React is to NextJs.

At the time of this writing, here are steps to see the MutationObserver is not defined error that is produced when trying to use SvelteKit's SSR with SWC.

npm create svelte@latest my-app (choose skeleton project, typescript, eslint, prettier, playwright)
cd my-app
npm install
npm run dev -- --open (You should see sveltekit working and a welcome to sveltekit message)
stop server
npm install @spectrum-web-components/bundle
create a +layout.svelte file here src/routes/+layout.svelte
Put this as the contents of the +layout.svelte.

<script>
  import '@spectrum-web-components/theme/scale-medium.js'
  import '@spectrum-web-components/theme/sp-theme.js'
  import '@spectrum-web-components/theme/theme-lightest.js'
</script>

<sp-theme theme="spectrum" color="lightest" scale="medium">
  <slot></slot>
</sp-theme>

npm run dev again to start the server and get a MutationObserver is not defined error.

Temporary solution

You can turn SSR off in SvelteKit, essentially turning your whole app into an SPA by...

adding a src/routes/+layout.ts next to your src/routes/+layout.svelte.
add the following to your +layout.ts

export const ssr = false

For more details check out https://kit.svelte.dev/docs/page-options#ssr

timganter commented 1 year ago

I think something happened either in Sveltekit or Spectrum WC since I wrote my comment. Because at a glance it seems to be working now for Sveltekit! 🎉

If you try my original steps to reproduce, the MutationObserver is not defined error no longer appears. Official SvelteKit 1.0 just came out so not sure if that has anything to do with it.

Not sure what the process is for closing issues is. So, I'll leave this open for y'all to decide if it should be closed. I can report back here in this issue or reopen it if I notice the MutationObserver error coming back for Sveltekit