Create React Appで絶対パスを使う(Absolute Imports)

設定は一瞬で終わるけど、忘れないうちに備忘録 Create React App は、v3.0.0 以降で絶対パスの import ができるようになった

相対パス

import Component from "../../components/Component";

絶対パス

import Component from "components/Component";

../を駆使しなくても、ダイレクトにsrc/components/Componentを import 出来るようになった

設定方法

jsconfig.json もしくは tsconfig.json に下記を設定する

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

src のエイリアスがつくので絶対パスで import 出来るようになる VS Code + TypeScript の定義元ジャンプもきちんと効いていた これまで .env で NODE_PATH=src を指定する方法もあったようだけど、それが必要なくなりそう

Create React App のドキュメントにも記載があった