create-react-app 3 で絶対パスインポート

環境

.sh

❯ npx create-react-app --version
3.0.1

version 3.0以上の環境だとsrc/hoge/piyoのように絶対パスでインポートできません。
../../..のような地獄から逃れるためには以下の設定が必要です。

絶対パスインポートするために必要な設定

1 環境変数NODE_PATH を設定する

プロジェクト直下に.envを作成します。

.env

NODE_PATH="."

2 tsconfig.jsonを設定する

プロジェクト直下にpaths.jsonを作成します。

paths.json

{
  "compilerOptions": {
    "baseUrl": "."
  }
}

tsconfig.jsonの最後の2行を追記します。

tsconfig.json

{
  "compilerOptions": {
     ...
  },
  "include": ["src"],
  "extends": "./paths.json"
}

これでsrc/~のように絶対パスでimportできます。