Zenn
🐒

Create React Appで導入されたReactのバージョンを変更する

2022/10/02に公開
React
TypeScript
tech

はじめに

2022/03 に、React18 系が公開されていますが、React18 に対応していないライブラリをインストールしようとしたところ、依存関係のエラーが発生しました。その対応策を記します。

create-react-app を利用すると、React プロジェクトの雛形を作成できますが、React は最新のバージョンが利用されるようです。
利用するライブラリなどが最新の React に対応していない場合、React のバージョンを変更する必要があります。

create-react-app でのプロジェクト雛形作成

# テンプレートにTypeScriptを指定してサンプルアプリを作成
$ npx create-react-app sample-app --template typescript

2022/10/02 現在、create-react-appコマンドで、雛形を作成するとpackage.jsonは以下のものが作成されます。

{
  "name": "sample-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.62",
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": ["react-app", "react-app/jest"]
  },
  "browserslist": {
    "production": [">0.2%", "not dead", "not op_mini all"],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

ライブラリのバージョン修正

React18 系から 17 系にダウングレードする例です。
以下のライブラリのバージョンを修正して、nm installを実行します。
※ testing-libraryは、バージョン 13 系から React17 がサポートされなくなっているとのことで、こちらもバージョン変更が必要です。
※ package.json では、^(キャレット)でバージョン指定することで、メジャーバージョン(一番左側の番号の中で最新のものがインストールされます)

  • react
  • react-dom
  • @types/react
  • @types/react-dom
  • @testing-library/react
  • @testing-library/user-event
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^12.0.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@testing-library/user-event": "^12.0.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.11.62",
-    "@types/react": "^18.0.21",
+    "@types/react": "^17.0.0",
-    "@types/react-dom": "^18.0.6",
+    "@types/react-dom": "^17.0.0",
-    "react": "^18.2.0",
+    "react": "^17.0.0",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17.0.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.8.4",
    "web-vitals": "^2.1.4"
  },

これで、React18 系に対応していないライブラリもnpm installできるようになっているはずです。

React18 で render の使い方が変わっている

React17 系に変更した後にnpm startで開発環境を立ち上げると以下のエラーが発生します。
こちらは 18 系から react-dom の利用方法が変更になっているからです。
index.tsxもしくは、index.jsxを 17 系の書き方に変更してあげる必要があります。

webpack compiled with 1 error
ERROR in src/index.tsx:2:22
TS2307: Cannot find module 'react-dom/client' or its corresponding type declarations.
    1 | import React from 'react';
  > 2 | import ReactDOM from 'react-dom/client';
      |                      ^^^^^^^^^^^^^^^^^^
    3 | import './index.css';
    4 | import App from './App';
    5 | import reportWebVitals from './reportWebVitals';

import React from "react";
- import ReactDOM from "react-dom/client";
+ import ReactDOM from "react-dom"
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

- const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
- );
- root.render(
- <React.StrictMode>
-    <App />
-  </React.StrictMode>
- );
+ ReactDOM.render(
+   <React.StrictMode>
+     <App />
+   </React.StrictMode>,
+  document.getElementById('root')
+ );

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

これで、開発環境が起動できるようになるはずです。

Discussion