Svelte: Component is not valid SSR component

1
2
3
4
5
6
7
8
9

<script>
  import { browser } from '$app/environment';

  let windowWidth;

  if (browser) {
    windowWidth = window.innerWidth;
  }
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script>
  import { onMount } from 'svelte';

  let chart;

  onMount(async () => {
    // クライアントサイドでのみ実行
    const Chart = (await import('chart.js')).default;
    chart = new Chart(/* ... */);
  });
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<script>
  import { browser } from '$app/environment';

  let MapComponent;

  if (browser) {
    import('$lib/Map.svelte').then(module => {
      MapComponent = module.default;
    });
  }
</script>

{#if MapComponent}
  <svelte:component this={MapComponent} />
{/if}

1
2

// +page.js
export const ssr = false;

1
2

// +page.svelte または +layout.svelte の script context="module"
export const ssr = false;

1
2
3
4
5
6

// vite.config.js
export default defineConfig({
  ssr: {
    noExternal: ['some-browser-only-package']
  }
});

1
2
3
4
5
6
7
8

<script>
  import { browser } from '$app/environment';
  import BrowserOnlyComponent from './BrowserOnlyComponent.svelte';
</script>

{#if browser}
  <BrowserOnlyComponent />
{/if}