‘./’同じディレクトリ内のファイルを参照するときに使う
‘../’一つ戻った先のディレクトリを参照するときに使う
reactでインポートするファイルを使用したいときに相対ディレクトリで指定するのですが
これがよく間違えるのでメモをとっておきます。
今日遭遇したエラーがこれ↓
Attempted import error: ‘../../services/Sample_SignUpService’ does not contain a default export (imported as ‘supporter_sampleService’).
一見パスがあっているように見えますがエクスポートに失敗しました。
ディレクトリも間違っていない。ファイル名も間違っていない？え、どういうこと？
それ系の情報サイトを覗いてみると、カッコが付いているインポートのやり方が間違っているとのことでしたが
これを外してもエラーが消えない。↓
これを↓
import { samplepService } from '../../Services/Sample_SignUpService';
↓こうしてもエラーが消えない import sampleService from '../../Services/Sample_SignUpService';
前にタイトルにハイフンがついていたファイルをインポートできなかった事案を
思い出したので、同じようにファイル名にアンダーバーが
ついているので試しにこれを外してみる。
以下のようにすると、ようやく解消されました。
import { sampleService } from '../../Services/Sample_SignUpService';
ハイフン若しくはアンダーバーが混在していると起きるエラーのようでした。
ということは他にもコロンとかスラッシュを使っても同じエラーが起きるということ？
どちらにせよファイル名適当にしたらあかんということでした。
