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

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

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

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

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

timarney/react-app-rewired: Override create-react-app webpack configs without ejecting

webpackの設定を追加

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

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に変更します。

"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の場合は注意が必要です。

{
	"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"
}

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

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

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

この記事をシェアする
この記事のタイトルとURLをコピーする
コウジ
Vue.jsが好きなフリーランスのフロントエンドエンジニアです。 フロントのHTML・CSS・JavaScriptの設計実装をメインに、RubyとNodeでサーバーサイドやってたりもします。
Nuxt.jsを身につけたい!
Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発

開発依頼

VueやReactを用いたSPAアプリケーションの開発を中心にフロントエンド開発のプロジェクトをお手伝いさせていただいております。
開発事例の詳細などはAboutの開発事例をご覧ください。

Contactよりお気軽に必要事項をご入力の上ご連絡ください。