Viteモノレポで上位ディレクトリへのアクセスを許可する - server.fs.allow

問題

モノレポ構造でサブパッケージが上位ディレクトリの共有モジュールをimportすると、Viteがブロックします。The request url is outside of Vite serving allow listエラーが発生します。

解決方法

// vite.config.ts
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import path from 'path';

export default defineConfig({
  plugins: [sveltekit()],
  server: {
    port: 5174,
    fs: {
      allow: [
        // 上位ディレクトリへのアクセスを許可（モノレポルート）
        path.resolve(__dirname, '..'),
      ],
    },
  },
});

ポイント

• Viteはセキュリティ上、プロジェクトルート外のファイルアクセスをデフォルトでブロックします。モノレポでは共有パッケージが上位にあるため、これが問題になります。
• server.fs.allowにパスを追加すると、そのディレクトリ以下のファイルをサーブできます。..を指定すると1階層上まで許可されます。
• この設定はDevサーバー（vite dev）にのみ影響します。プロダクションビルドには適用されません。ビルド時はバンドラーが自動的に処理します。