React.jsがReact v18をリリースしてから、CRAはこの最新バージョンのReactをインストールします。
つまり、create-react-appは最新のすべてのReactバージョンと依存関係バージョンを使用して、まったく新しいReactアプリケーションを作成するためのCLIツールです。
ですが、現時点ではすべてのパッケージがこの最新バージョンのReact 18をサポートしているわけではありません。
そのような場合、プロジェクトで依存関係エラーが発生します。
この問題は、React 18をまだ使用する準備ができていない依存関係に対してより広く存在します、React v18でまだ動作できない内部ライブラリがあるため、この問題が発生しています
つまり、使用したい他の多くの依存関係がバージョン18に対して最新ではなくサポートがされていないので、ダウングレードをしたい場合です。
既存のプロジェクトのReactバージョンをv18からv17にダウングレードする方法です。
React 18からv17にダウングレード
・方法 1
最も簡単で一般的な方法となります。
Reactバージョン18を17にダウングレードするにはまず、package.jsonファイルを開きます
package.jsonにある下記の行を変更します。
"react": "^17.0.2" "react-dom": "^17.0.2"
必ず、 "react"と"react-dom"両方のバージョンを変更して下さい。
次に再インストールします。
npm install yarn
この方法で、基本的には実際にnode_modulesを削除する必要はありません。
package.jsonのreactのバージョンを必要なバージョンに変更し、『npm i』を実行するだけです。
これにより、 packagejsonに配置した内容に基づいて、バージョンがアップグレードまたはダウングレードされます。
・方法 2
上記の方法で、解決しない場合はpackage-lock.jsonとnode_modulesを削除してからnpmで再度インストールし適用させます。
yarnを使用してる場合は、yarn.lockファイルも削除して下さい。
npm install yarn
これであなたのReactバージョンはReact17に変更されています。
・方法3
コマンドラインから使用します。
npm install --save react@17.0.2 react-dom@17.0.2 yarn add react@17.0.2 react-dom@17.0.2
バージョンの確認をします。
npm list react ├─┬ react-dom@17.0.2 └── react@17.0.2 deduped └── react@17.0.2
yarn list --pattern react ├─ react-dom@17.0.2 └─ react@17.0.2
バージョンを指定して、再インストールします。
これでエラーはなくなり、あなたの問題は解決されるはずです。
・方法4
React 18をアンインストールし、React 17をインストールします。
npm uninstall react yarn remove react
React 18をアンインストールしましたら次にReact 17をインストールします。
npm install react@17.0.2 yarn add react@17.0.2
React 17でNext.jsをインストール
これを行うには、Next.jsの古いバージョンを使用する必要があります。
React 17で確認できる最新のものは12.1.2となります。
次のようにしてプロジェクトを開始できます。
npx create-next-app@12.1.2 yarn create next-app@12.1.2
Next.jsのリリース変更ログはこちらになります。
上記のコマンドは、新規プロジェクトの場合です。
既存のプロジェクトで上記コマンドを叩いても、reactおよびreact-domの依存関係バージョンは18がインストールされたままとなります。
すでにプロジェクトを作成している場合では、その新しいバージョンを削除しなければいけません。
既存のNext.jsプロジェクトでReact 17にダウングレード
下記コマンドはNext.jsプロジェクト作成時にTypeScriptを選択している場合は『@types』パッケージを使用します。
npm uninstall next react react-dom @types/react @types/react-dom
JavaScriptを選択してる方は、『@types』をスキップしてアンインストールして下さい。
これはyarnも同様です。
npmではなく、yarnを使用している場合は『yarn remove』となります。
次に、古いバージョンをインストールします。
npm install next@12.1.2 react@17.0.2 react-dom@17.0.2 // or npm install -D @types/react@17.0.2 @types/react-dom@17.0.2
こちらもプロジェクト作成時にTypeScriptではなく、JavaScriptを選択している場合は『@types』パッケージをスキップさせて再インストールして下さい。
Next.jsのバージョンを最新に更新
Next.jsでは、多くのアップデートが時々リリースされていきます。
Next.jsとReact.jsチームは、Next.jsで毎週多くのバグを解決してくれています。
開発者としての私たちの責任は、ライブラリパッケージを更新し続け、ユーザーに最も安全で高速なWebサイトを提供することです。
Next.jsをグローバル更新します。
下記コマンドを使用して、特定のパッケージをアップグレードします。
updateまたはupgradeコマンドを実行する前に、yarnまたはnpmパッケージの最新バージョンがあることを確認してください。
npm update -g create-next-app yarn global upgrade create-next-app
下記コマンドは、yarnのすべてのグローバルインストールパッケージをアップグレードします。
yarn global upgrade or yarn global upgrade --latest or yarn global upgrade <package-name>
アップグレードされているかpackage.jsonファイルで確認して下さい。
グローバル更新を避けたい場合は、--globalフラグなしで『npm update』または『yarn upgrade』コマンドを実行してください。
グローバル更新でない場合は、エラーが発生する可能性があります。
つまりNext.jsパッケージの更新中にエラーが発生する場合です。
そのエラーは、npmが依存関係を解決しないために表示されるかまたは、npmパッケージをすぐに更新すると、npmバイナリが変更されて壊れます。
そのため、エラーが発生する原因となります。
解決策はあります。
『npmupdate --force』の『 --force』フラグで依存関係の競合を回避させます。
または、『npm update --legacy-peer-deps』コマンドを実行します。
どちらも、問題なく依存関係をインストールします。
最後に
Reactのバージョン18から17にダウングレードする方法を学ぶのは難しい事ではなく簡単です。
このプロセスは数秒以上かかることはなく、npmとyarnの両方で実行可能です。
Reactのバージョンをダウングレードまたはアップグレード(最新に更新)した場合は、必ず最上位ファイルである『src/index.js』のエントリポイントファイルを確認するようにして下さい。
React 18へのアップグレードも簡単で、変更の結果として既存のコードが壊れることはありません。
本日は以上となります。
最後までこの記事を読んで頂きありがとうございます。