どうも、シローです。
最近、Reactの勉強が捗ってます。
今までサーバサイドの実装がメインでしたが、React.jsはコンポーネントをクラス化して組み合わせていく感覚が楽しいですw
それで今回はimportでファイルを読み込むパスを絶対パスを基準にする方法を紹介します。
前提
今回の方法はこちらで紹介されているnpx create-react-appで生成されたプロジェクトで使えます。URL(https://create-react-app.dev/docs/importing-a-component/#absolute-imports)
公式(Facebook)で載ってる方法なので、割と一般的なのかも・・？
jsconfig.jsonファイルを設定（なければ作成）
結論、jsconfig.jsonというファイルをsrcディレクトリと同じ階層に作成して、内容を以下にすれば大丈夫です。
|
1 2 3 4 5 6 |
{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } |
そのあとはnpm startでプロジェクトを再起動すれば反映完了！
既存の相対パスにしているファイルには影響ないのか？
相対パスになっている部分../components/Headerという感じにしている部分も修正前と同じくファイルの読み込みがされていました。
特に影響はなさそうです。
まとめ
Qiitaなどではwebpackやbabelの設定で解決している記事が見られましたが、本家のサイトではそれらを知らなくても解決できる手段が用意されているのは良いなと思いました。
迷ったらとりあえずは公式というのは大事かもしれませんね。