Zenn
Open3

Vite + Svelte + TypeScript環境で別ルートディレクトリを使用する場合のコンパイルエラーの解消

TypeScript
Svelte
#
環境構築
Vite
warugakiwarugaki

事象

以下のようにvite.config.js で root変更するとコンパイルエラーが発生する

vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

// https://vitejs.dev/config/
export default defineConfig({
  root: './src',
  publicDir: '../public',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
  plugins: [
    svelte(),
  ],
});

以下のようにエラーになる

warugakiwarugaki

なぜroot変更したのか・・

index.html を src/ディレクトリ配下に設定したいため

warugakiwarugaki

解消方法1

root設定をしないｗ
これが一番安定するのかなぁ～

解消方法２

svelte.config.cjs をroot基準で相対パス指定する

./vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

// https://vitejs.dev/config/
export default defineConfig({
  root: './src',
  publicDir: '../public',
  build: {
    outDir: '../dist',
    emptyOutDir: true,
  },
  plugins: [
    svelte({
      configFile: '../svelte.config.cjs',
    }),
  ],
});