Frequently Asked Questions

他のリソース permalink

Svelte FAQ と vite-plugin-svelte FAQ も、これらのライブラリに起因する疑問点には役立つのでご参照ください。

SvelteKit はまだ1.0ではないようです。使うべきですか？ Sapperはどうですか？ permalink

SvelteKit は現在のところ、API が確定されるまでの間はベータ版です。Sapper には新機能が追加される予定はなく、開発は全て SvelteKit にフォーカスされています。

SvelteKit で HMR を使うにはどうすればよいですか？ permalink

SvelteKit は svelte-hmr によってデフォルトで HMR が有効になっています。Rich の 2020 Svelte Summit のプレゼンテーションを見たことがあるなら、より強力そうに見えるバージョンの HMR をご覧になったかもしれません。あのデモでは svelte-hmr の preserveLocalState フラグがオンになっていました。このフラグは想定外の動作やエッジケースにつながる可能性があるため、現在はデフォルトでオフになっています。でもご心配なく、SvelteKit で HMR を利用することはできます！もしローカルの状態を保持したい場合は、svelte-hmr ページに説明があるように、@hmr:keep または @hmr:keep-all ディレクティブを使用することができます。

adapter の使用に問題があります。 permalink

package.json で指定されている adapter のバージョンが "next" になっていることを確認してください。

パスのエイリアスを設定するにはどうすればよいですか？ permalink

エイリアスは svelte.config.js で設定することができます。詳細は configuration ドキュメントをご覧ください。

設定したら、npm run sync または npm run dev (sync を実行します) を実行してください。SvelteKit は必要なエイリアスの設定を jsconfig.json または tsconfig.json に自動で生成します。

環境変数を使用するにはどうしたらよいですか？ permalink

Vite は dotenv を使用して、.env などのファイルから環境変数を読み込んでいます。VITE_ というプレフィックスを持つ環境変数のみが公開されます（これはenvPrefix を設定することで変更可能です）。import.meta.env.VITE_ENV_VAR を使用することでその変数にアクセスすることができ、そして Vite はビルド時にこれらを静的に置き換えます。

実行時に環境変数を使用するには、サーバーサイドのコードで dotenv をインスタンス化し、process.env.YOUR_ENV_VAR で環境変数が公開されるようにする必要があります。また必要であれば、$session を使ってクライアントに渡すこともできます。

環境変数についてのより詳しい情報は、Viteのドキュメントを参照してください。

"`package.json` の詳細をアプリケーションに含めるにはどうすればよいですか？" permalink

SvelteKit は svelte.config.js を ES module として想定しているため、JSON ファイルを直接要求することはできません。もしアプリケーションに package.json からバージョン番号またはその他の情報を含めたい場合は、このように JSON をロードすることができます:

svelte.config.js

ts
import { readFileSync } from 'fs';
import { fileURLToPath } from 'url';
 
const file = fileURLToPath(new URL('package.json', import.meta.url));
const json = readFileSync(file, 'utf8');
const pkg = JSON.parse(json);

パッケージをインクルードしようとするとエラーが発生するのですが、どうすれば直せますか？ permalink

Vite の SSR サポートは Vite 2.7 以降かなり安定しています。ライブラリのインクルードに関する問題は、ほとんどが不適切なパッケージングによるものです。

Vite の場合、ライブラリは ESM バージョンが配布されているともっともうまく動作するので、ライブラリの作者にそれを提案すると良いでしょう。以下は、ライブラリが正しくパッケージングされているかどうかをチェックする際に気を付けるべき点です:

exports は main や module などの他のエントリーポイントのフィールドよりも優先されます。exports フィールドを追加すると、deep import を妨げることになるため、後方互換性が失われる場合があります。
"type": "module" が指定されていない限り、ESM ファイルは .mjs で終わる必要があり、CommonJS ファイルは .cjs で終わる必要があります。
exports が定義されていない場合、main を定義する必要があり、それは CommonJS ファイルか ESM ファイルでなければならず、前項に従わなければならない。module フィールドが定義されている場合、ESM ファイルを参照している必要があります。
Svelte コンポーネントは完全に ESM として配布される必要があり、また、エントリーポイントを定義する svelte フィールドがなければなりません。

外部の Svelte コンポーネントの依存関係(dependencies)が ESM バージョンを提供していることを確認することが推奨されます。しかし、CommonJS の依存関係(dependencies) を扱うため、vite-plugin-svelte は外部の Svelte コンポーネントの CJS の依存関係(dependencies) を探し、Vite に対し、自動的に Vite の optimizeDeps.include にそれらを追加して事前バンドル(pre-bundle)するよう依頼します。Vite はそれらを ESM に変換するのに esbuild を使用します。このアプローチの副作用は初期ページのロードに時間がかかることです。もしこれが気になるなら、svelte.config.js で experimental.prebundleSvelteLibraries: true を設定してみてください。このオプションは experimental であることにご注意ください。

それでもまだ問題が解消されない場合は、SvelteKit ユーザーに影響する既知の Vite の issue 一覧をチェックし、Vite の issue tracker と該当のライブラリの issue tracker を検索することを推奨します。optimizeDeps や ssr の設定値をいじることで問題を回避できる場合もあります。

SvelteKit で X を使うにはどうすればよいですか？ permalink

ドキュメントのインテグレーションのセクションをしっかり読み込んでください。それでも問題が解決しない場合のために、よくある問題の解決策を以下に示します。

データベースのセットアップはどう行えばよいですか？permalink

データベースに問い合わせを行うコードをエンドポイントに置いてください - .svelte ファイルの中でデータベースに問い合わせを行わないでください。コネクションをすぐにセットアップし、シングルトンとしてアプリ全体からクライアントにアクセスできるように db.js のようなものを作ることができます。hooks.js で1回セットアップするコードを実行し、データベースヘルパーを必要とするすべてのエンドポイントにインポートできます。

ミドルウェア(middleware)を使うにはどうすればよいですか？permalink

adapter-node は、プロダクションモードで使用するためのミドルウェアを自分のサーバで構築します。開発モードでは、Vite プラグインを使用して Vite にミドルウェア(middleware) を追加することができます。例えば:

ts
/** @type {import('vite').Plugin} */
const myPlugin = {
  name: 'log-request-middleware',
  configureServer(server) {
    server.middlewares.use((req, res, next) => {
      console.log(`Got request ${req.url}`);
      next();
    });
  }
};
 
/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    vite: {
      plugins: [myPlugin]
    }
  }
};
 
export default config;

順序を制御する方法など、詳しくは Vite の configureServer のドキュメントをご覧ください。

`document` や `window` に依存しているクライアントサイドオンリーなライブラリはどう使えばよいですか？permalink

もし document や window 変数にアクセスする必要があったり、クライアントサイドだけで実行するコードが必要な場合は、browser チェックでラップしてください:

ts
import { browser } from '$app/env';
 
if (browser) {
  // client-only code here
}

コンポーネントが最初にDOMにレンダリングされた後にコードを実行したい場合は、onMount で実行することもできます:

ts
import { onMount } from 'svelte';
 
onMount(async () => {
  const { method } = await import('some-browser-only-library');
  method('hello world');
});

使用したいライブラリに副作用がなければ静的にインポートすることができますし、サーバー側のビルドでツリーシェイクされ、onMount が自動的に no-op に置き換えられます:

ts
import { onMount } from 'svelte';
import { method } from 'some-browser-only-library';
 
onMount(() => {
  method('hello world');
});

一方、ライブラリに副作用があっても静的にインポートをしたい場合は、vite-plugin-iso-import をチェックして ?client インポートサフィックスをサポートしてください。このインポートは SSR ビルドでは取り除かれます。しかし、この手法を使用すると VS Code Intellisense が使用できなくなることにご注意ください。

ts
import { onMount } from 'svelte';
import { method } from 'some-browser-only-library?client';
 
onMount(() => {
  method('hello world');
});

Yarn 2 で動作しますか？permalink

多少は。Plug'n'Play 機能、通称 'pnp' は動きません (Node のモジュール解決アルゴリズムから逸脱しており、SvelteKitが数多くのライブラリとともに使用しているネイティブの JavaScript モジュールではまだ動作しません)。.yarnrc.yml ファイルで nodeLinker: 'node-modules' を使用して pnp を無効にできますが、おそらく npm や pnpm を使用するほうが簡単でしょう。同じように高速で効率的ですが、互換性に頭を悩ませることはありません。

また、Svelteに直接関連する質問は Svelte FAQ をご覧ください。