😀

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

2019/07/03に公開

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

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

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

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

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

const path = require('path')

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

  return config
}

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

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",

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

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

{
	"compilerOptions": {
	  "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

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

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すればエラーがでなくなります。

{
	"extends": "./tsconfig.paths.json"
}

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

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