sveltekitで SyntaxError: The requested module '/hoge' does not provide an export named 'Hoge' がでる

svelteに入門し、早速フレームワークのsveltekitを試してみました。

外部ファイルである dummy-data.tsを index.svelte にimportしようとした時に

SyntaxError: The requested module '/hoge' does not provide an export named 'Hoge'

というエラーが出て少しハマったので解決策を書いておきます。

エラーとなる状態

dummy-data.tsを作ります。

export type Data = {
  id: number;
  title: string;
}

export const dummyData: Data[]  = [
  {
    id: 1,
    title: 'hogehoge',
  },
  {
    id: 2,
    title: 'fuga',
  }
]

上記のようなTypeScriptファイルをsveleteにimportしようとしました。

index.svelte

<script lang="ts">
  import {Data, dummyData} from '../../dummy-data';

...
</script>

これでリロードをすると画面上に SyntaxError: The requested module '/dummy-data.ts' does not provide an export named 'Data' というエラーが表示されます。

解決策

どうやらsveltekitで使用されているビルドツールのviteに固有のエラーだそうです。 GitHub上にissueが上がっていました。

github.com

これによると

import type { User } from '~/types'

このような形式でimportするとうまくいくようです。

index.svelteを下記のように書き換えます。

<script lang="ts">
    import type {Data} from '../../dummy-data';
    import {dummyData} from '../../dummy-data';
...
</script>

これでビルドがうまくいきました！！ ただ同じファイルからimportしているのに分けて記述するのは面倒ですね。 他に解決策がありましたら教えてください🙇‍♀️