React Typescript環境におけるカスタムパスエイリアス設定

2024/02/11

  • React
  • TypeScript
  • webpack
  • ESLint

もくじ

やりたいこと

create-react-app で作った TypeScript 環境の React アプリで、下記のように絶対パス&エイリアスによるインポートに設定変更する
※毎度相対パスで import するのは手間なので

import Hoge from '@/hoge/hogehoge';

環境

言語 UI ライブラリ リンター その他
typescript react v18.2.0 eslint v8.56.0 react-scripts v5.0.1

対応内容

create-react-app を使用している場合、デフォルトでは webpack の alias 設定を直接変更することはできないっぽいので、create-react-app の設定をオーバーライドするためのツールであるreact-app-rewiredを使用する

react-app-rewired をインストール

npm install react-app-rewired --save-dev

package.json の scripts コマンド更新

package.json
{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
    // ...
  }
}

プロジェクトルートに config-overrides.js ファイル作成して alias 設定を追加

config-overrides.js
const path = require('path')

module.exports = function override(config, env) {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@': path.resolve(__dirname, 'src/'),
  }
  return config
}

TypeScript の設定

  • プロジェクトルートに tsconfig.paths.json ファイルを作成して compilerOptions を追加
tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

tsconfig.jsoncompilerOptions で設定すると動かない。
extends の設定は TypeScript のコンパイラに対してのみ影響を及ぼし、Webpack の解決メカニズムには影響しないらしい。

  • tsconfig.jsonextends を設定して tsconfig.paths.json を参照する
tsconfig.json
{
  "extends": "./tsconfig.paths.json"
  // ...
}

ここまでの設定で正常に動くようになった。

ESLint の対象から config-overrides.js を外しておく

最後に config-overrides.js.eslintignore に追加して ESLint の対象から外しておく。

.eslintignore
/config-overrides.js