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が上がっていました。
これによると
import type { User } from '~/types'
このような形式でimportするとうまくいくようです。
index.svelte
を下記のように書き換えます。
<script lang="ts"> import type {Data} from '../../dummy-data'; import {dummyData} from '../../dummy-data'; ... </script>
これでビルドがうまくいきました!! ただ同じファイルからimportしているのに分けて記述するのは面倒ですね。 他に解決策がありましたら教えてください🙇♀️