localhost下のreactでfetch文を使ってもパスが合わない

Question

開発環境
npm のcreate-react-appを使っています

問題点
非同期処理でjsonファイルを取得して、臨時にデータを読み込もうとしています。パスは相対パスで指定しています。
しかし実行してみると、jsonファイルを取得できません。
エラー名は、SyntaxError: Unexpected token < in JSON at position 0　またコンソールにはindex.htmlが返されてます。
※import文でjsonファイルを読み込むなどはしていません。

await fetch('./Cparameter.json',{
            method: "GET",
          })
          .then(response => response.text())
          .then(text => {
            const datas= JSON.parse(text);
            console.log(text);
//index.htmlのデータが返される
    })
 }

質問
１.おそらくはローカルサーバーのディレクトリ構成が全く違うものに書き換えられているのだろうと思っています。開発コードに、素直に相対パスを使って非同期にファイルを取得するのは無謀なのでしょうか？

２.どうすれば非同期でファイルを読み込めるようになるのでしょうか？お教え頂きたいです。

粗末な文章ですが、お救いいただけると幸いです。

Answer 1

相対パスってフレームワーク使う上では悪手だと思います。
まずは、ブラウザからhttpアクセス可能なURLフルパスにしてみては。

Comments

[aoikyu]

ご回答ありがとうございます。ご指摘の通り、jsconfigを作成し、URLも絶対パスに直しました(/src/がlocalhostの根らしいので「srcディレクトリ」視点での絶対パスに直しました)。
しかし、非同期通信でのファイル取得はできませんでした。。

後々、PC視点での絶対パスも通ったのでそちらも試しましたが結果は同じです。。

[m.ts10806]

ブラウザから直アクセス（httpで）してみましたか？
いずれにしてもどのように対応されたのかわからないのでなんとも。

[aoikyu]

http://localhost:3000/...のように繋げましたがやはりダメでした。ローカルサーバー上でのディレクトリ構成が（create-react-appのパッケージによって）違う形に変換されているのでしょうが、その仕様がわからないのが問題です。。

nodejsやバックサイドを勉強して出直そうと思います。質問にお相手してくださりありがとうございました。