浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react】ディレクトリの記述ミスについて

‘./’同じディレクトリ内のファイルを参照するときに使う

‘../’一つ戻った先のディレクトリを参照するときに使う

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';

 

ハイフン若しくはアンダーバーが混在していると起きるエラーのようでした。

ということは他にもコロンとかスラッシュを使っても同じエラーが起きるということ?

どちらにせよファイル名適当にしたらあかんということでした。

  • この記事いいね! (0)