react-app-rewired

react-app-rewired とは？

react-app-rewired は、create-react-app (CRA) で作成した React プロジェクトにおいて、eject をせずに webpack や Babel の設定をカスタマイズできるツールです。

---

なぜ必要なのか？

CRA は内部の設定（webpack, Babelなど）を隠しており、デフォルトではユーザーが直接変更することができません。
設定を変更するには eject を使う必要がありますが、これを使うと構成ファイルが大量に展開され、管理が複雑になります。

react-app-rewired を使えば、eject せずに設定を上書き（オーバーライド） することが可能です。

---

基本的な使い方

1. インストール

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

2. スクリプトの変更（package.json）

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

3. config-overrides.js を作成

プロジェクトルートに config-overrides.js ファイルを作成し、設定をカスタマイズします。

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

module.exports = function override(config, env) {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@': path.resolve(__dirname, 'src'),
    "react/jsx-runtime": require.resolve("react/jsx-runtime.js"), // などなど
  };
  return config;
};

---

よく一緒に使われるライブラリ：customize-cra

react-app-rewired 単体でも使えますが、customize-cra を併用すると簡潔に設定ができます。

注意点

• react-app-rewired は CRA の公式な機能ではありません。
• CRA v5 以降では webpack 5 が導入され、一部の設定がうまく動作しない場合があります。
• 代替として CRACO が人気で、より活発にメンテナンスされています。

---