【Sveltekit】ssr時にself is not definedが出る

# はじめに
jsonを編集するためのライブラリである[JSONEditor](https://github.com/josdejong/jsoneditor)をsveltekitで使おうとするとエラーが出たのでその対処法を載せておく。

## 動作環境
svelte 4.2.7
sveltekit 2.0.0

# エラー
↓のようにJSONEditorを読み込むと、
```svelte:+page.svelte
<script>
    import JSONEditor from 'jsoneditor';
</script>
```
こんなエラーが出る。
```shell:ターミナル
23:06:01 [vite] Error when evaluating SSR module /src/routes/JsonEditor/+page.svelte: failed to import "jsoneditor"
|- ReferenceError: self is not defined
    at Object.<anonymous> (/Users/abeyuuta/programming/js/svelte/self-error/node_modules/jsoneditor/dist/jsoneditor.min.js:30:202)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///Users/abeyuuta/programming/js/svelte/self-error/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:55074:17)

ReferenceError: self is not defined
    at Object.<anonymous> (/Users/abeyuuta/programming/js/svelte/self-error/node_modules/jsoneditor/dist/jsoneditor.min.js:30:202)
    at Module._compile (node:internal/modules/cjs/loader:1241:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1295:10)
    at Module.load (node:internal/modules/cjs/loader:1091:32)
    at Module._load (node:internal/modules/cjs/loader:938:12)
    at cjsLoader (node:internal/modules/esm/translators:284:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:234:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:217:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///Users/abeyuuta/programming/js/svelte/self-error/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:55074:17)
```

# 原因
```shell
self is not defined
```
と書かれているように、selfが見つからないのでエラーを吐いている。

## selfって何
ブラウザのみで使用できるグローバル変数。
ウィンドウの自己参照を表す。
`window`のエイリアスみたいな感じ。
sveltekitはSSRがデフォルトでオンになっているから、コードがブラウザで実行されずにnodeサーバーで実行され、selfが見つからずに死んだ。

# 対処法1 ssrをオフにする
`+page.svelte`と同じ階層に`+page.js`を作り、
```typescript:+page.js
export const ssr = false;
```
を記述する。
こうするとssrされず、そのページだけCSRに切り替わるのでnodeサーバーでコードが実行されず、エラーを吐かなくなる。
一番楽。

# 対処法2 動的importをする
onMountを使って、マウント後に動的にimportをすればエラーは出ない。

全体的なコードは以下のような形
```svelte:+page.svelte
<script>
    import { onMount } from 'svelte';

    let editor;
    let container;

    onMount(async () => {
        const JSONEditor = (await import('jsoneditor')).default;
        await import('jsoneditor/dist/jsoneditor.min.css');

        const options = {};
        editor = new JSONEditor(container, options);

        const initialJson = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello World"
        };
        editor.set(initialJson);

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

<div bind:this={container} style="width: 400px; height: 400px;"></div>

```
動的importすると色々とめんどくさいのであまりお勧めはしない。

# まとめ
SSR時に`self is not defined`が出たら`ssr = false`するか動的importを試す。
selfに限らず、SSR時に問題が出たらとりあえずこの対処法で良さそう。