はじめに
Reactの学習中に以下のエラーで沼ったので解決方法を記載します。
Uncaught SyntaxError: The requested module '/src/components/〇〇〇〇' does not provide an export named '〇〇〇〇'
問題
リファクタリングしていて、コンポーネントにコードをまとめてたときに出てきたエラーです。
開発環境はstackblitzを使ってました。
ブラウザはChromeです。
reactの学習中に起こりました。以下のエラー
Uncaught SyntaxError: The requested module '/src/components/〇〇〇〇' does not provide an export named '〇〇〇〇'
内容は「/src/components/〇〇〇〇 というモジュールには 〇〇〇〇 という名前付きエクスポートは存在しない」というものです。
噛み砕いっていうと、importした先のファイルが見つからないから表示できないよっというもの。
原因の可能性はパスが間違っていたということ。
以下がエラーが起きた時のコード。
import { InputTodo } from './components/InputTodo';
そして、ファイルの構成。
一見間違いはなさそうでした。
解決方法
解決方法はシンプルでした。jsxの拡張子をつけるだけ
import { InputTodo } from './components/InputTodo.jsx';
ですが、
Viteが入っているので、張子は省略して書いても良いはず。
根本的な原因は、キャッシュでした。
プレビューの方のキャッシュは消してたのですが、エディタの方のキャッシュを消したら、エラーは解決しました。
両方のキャッシュを消すことが大事ですね。
おわりに
よくキャッシュに悩まされますね。