Skip to main content

Frequently Asked Questions

SvelteKit はまだ1.0ではないようです。使うべきですか?

SvelteKit は現在のところ、リリース候補の段階です(release candidate phase)。破壊的な変更は最小限になると考えており、開発はバグの修正にフォーカスされています。

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

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

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

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

How do I include details from package.json in my application?

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

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);

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

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

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

  • exportsmainmodule などの他のエントリーポイントのフィールドよりも優先されます。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.jsexperimental.prebundleSvelteLibraries: true を設定してみてください。このオプションは experimental であることにご注意ください。

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

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

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

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

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

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

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

ts
import { sveltekit } from '@sveltejs/kit/vite';
 
/** @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('vite').UserConfig} */
const config = {
plugins: [myPlugin, sveltekit()]
};
 
export default config;

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

documentwindow に依存しているクライアントサイドオンリーなライブラリはどう使えばよいですか?

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

ts
import { browser } from '$app/environment';
 
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 で動作しますか?

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

Yarn 3 を使用するにはどうすれば良いですか?

現時点の、最新の Yarn (version 3) の ESM サポート は experimental であるようです。

結果は異なるかもしれませんが、下記が有効なようです。

最初に新しいアプリケーションを作成します:

yarn create svelte myapp
cd myapp

そして Yarn Berry を有効にします:

yarn set version berry
yarn install

Yarn 3 global cache

Yarn Berry の興味深い機能の1つに、ディスク上のプロジェクトごとに複数のコピーを持つのではなく、パッケージ用に単一のグローバルキャッシュを持つことができる、というのがあります。しかし、enableGlobalCache の設定を true にするとビルドが失敗するため、.yarnrc.yml ファイルに以下を追加することを推奨します:

nodeLinker: node-modules

これによってパッケージはローカルの node_modules ディレクトリにダウンロードされますが、上記の問題は回避され、現時点では Yarn の version 3 を使用するベストな方法となります。