Create React AppのプロジェクトをReact17にダウングレードする

現状のCreate React AppはReact18でプロジェクトを作る。ただ、まだReact18に対応していないライブラリも多い。そのためReact17にダウングレードする方法を調べたのでメモする。

確認環境

MacBook Pro (16-inch 2019)
macOS Monterey 12.0.1
Node.js v14.17.1

手順

# プロジェクトを作る。今回はTypeScriptのプロジェクトで試した
npx create-react-app my-app --template typescript    
cd my-app

# 依存関係をReact 17系対応にする
npm install --save react@17.0.2 react-dom@17.0.2 @testing-library/react@12.1.5   

index.tsxを以下に書き換える。

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

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();

これで、npm startすることで実行できるようになった。

以上

参考

How to set React version to react@17 when i use npx create-react-app ? #12269

CreateReactAppでReact 18のプロジェクトを作るとエラーがでる