🌊

vite-plugin-svelte-svg の ts(2307) エラーを消す

hotwatermorning

2023/09/27に公開

TL;DR

vite-plugin-svelte-svg プラグインを使って svg ファイルをコンポーネントとして読み込んだときの ts(2307) エラーを解消するには、src ディレクトリ内に @types/index.d.ts ファイルを作成して、以下の内容を記載する。

src/@types/index.d.ts

declare module '*.svg?component' {
  import Svelte from 'svelte';
  export default Svelte.SvelteComponent;
}

vite-plugin-svelte-svg の ts(2307) エラーについて

Svelte で開発をする際、 vite-plugin-svelte-svg プラグインを使うと svg をコンポーネントととして import できる。^[1]

+page.svelte

<script lang="ts">
  // .svg に ?component を付けると、 svg ファイルをコンポーネントとして import できる。
  import Icon from "$lib/images/icon.svg?component";
</script>

<div class="layout">
  <h1>Show SVG</h1>
  <div class="layout-icon">
    <Icon />
  </div>
</div>

<style>
  .layout {
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: #343434;
  }

  .layout-icon {
    height: 300px;
    width: 300px;
  }
</style>

表示されるページ
ページの見た目

このように期待通りページは表示されるものの、このコードはそのままだと svelte-check に通らず、 VSCode 上でも波線のエラー表示が出てしまう問題がある。

svelte-checkの出力

[~/develop/test/svelte-svg-test/my-app] 2023-09-27 07:34:10+0900 
% npm run check

> my-app@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /Users/kohsuke.yuasa/develop/test/svelte-svg-test/my-app
Getting Svelte diagnostics...

/Users/kohsuke.yuasa/develop/test/svelte-svg-test/my-app/src/routes/+page.svelte:2:20
Error: Cannot find module '$lib/images/icon.svg?component' or its corresponding type declarations. (ts)
<script lang="ts">
  import Icon from "$lib/images/icon.svg?component";
</script>


====================================
svelte-check found 1 error and 0 warnings in 1 file

VSCode での見た目

これを回避するには、冒頭に記載したように src ディレクトリ内に @types/index.d.ts ファイルを作成して *.svg?component で読み込むモジュールに対する型定義を設定するようにする。

これによって、 svelte-check が問題なく通るようになり、 VSCode 上でも波線のエラー表示がなくなる。

[~/develop/test/svelte-svg-test/my-app] 2023-09-27 07:36:25+0900 
% npm run check

> my-app@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /Users/kohsuke.yuasa/develop/test/svelte-svg-test/my-app
Getting Svelte diagnostics...

====================================
svelte-check found 0 errors and 0 warnings

脚注

vite-plugin-svelte-svg の設定で requireSuffix オプションを false にする方法もあるが、その方法もそのままだと Argument of type 'string' is not assignable to parameter of type 'ConstructorOfATypedSvelteComponent'. というエラーが出るのと、 svg ファイルをコンポーネントとして読み込むかどうかを区別したいケースがあるかもと考えて、自分はこのオプションは true に設定して import 時に明示的に ?component を付けるようにしている。（実際にそのようなケースはほとんどなさそうではあるが） ↩︎

LabBaseテックノートPublication

TL;DR

vite-plugin-svelte-svg の ts(2307) エラーについて

Discussion