react-create-app + TypeScriptでwebpackのaliasを設定する方法

react-create-appでアプリケーションを作るとwebpackのaliasの指定できないのか?と思いつつimportのパスを書いてました。

使う頻度が増えるに連れていい加減なんとかできないかと思って調べてみるとnpmパッケージを一つインストールすれば設定できました。

目次

1. react-app-rewiredをインストール
   1. webpackの設定を追加
   2. package.jsonのコマンドを変更
2. TypeScriptに対応する
3. react-create-app + TypeScriptの構成で起動

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

react-create-appのwebpackの設定を変更するにはreact-app-rewiredというパッケージをインストールします。

[timarney/react-app-rewired: Override create-react-app webpack configs without ejecting](https://github.com/timarney/react-app-rewired)

webpackの設定を追加

config-overides.jsというファイルに下記を追加してaliasを設定します。

1
2
3
4
5
6
7
const path = require('path')

module.exports = (config, env) => {
  config.resolve.alias['@'] = path.resolve(__dirname, './src')

  return config
}

package.jsonのコマンドを変更

package.jsonにデフォルトで書かれいたreact-scriptsの部分をreact-app-rewiredに変更します。

1
2
3
4
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",

TypeScriptに対応する

TypeScriptに対応するにはもうひと手間ありtsconfig.jsonにパスを設定する必要があります。

tsconfig.jsonでパスを設定するには下記のようにすればよいのですが、react-create-appの場合は注意が必要です。

1
2
3
4
5
6
7
8
{
	"compilerOptions": {
	  "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

このまま起動しようとすると下記のようなエラーが発生してしまいます。

1
Error: Your project’s `baseUrl` can only be set to `src` or `node_modules`. Create React App does not support other values at this time.

baseUrlに「./」を指定できないというエラーですが、これを回避するためにパス設定用のjsonを追加します。

上記のパス設定だけをtsconfig.paths.jsonなどの名前で新規に作成しtsconfig.jsonからextendsすればエラーがでなくなります。

1
2
3
{
	"extends": "./tsconfig.paths.json"
}

react-create-app + TypeScriptの構成で起動

これまで書いた設定を済ませてアプリケーションを起動するとエラーが表示されることなく起動できました。

webpackの設定変更はnpmパッケージを追加することなく対応できると嬉しいんですけどね・・。