React v18から17にダウングレードする方法【CRAまたはCNA】
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にダウングレード
方法 １
最も簡単で一般的な方法となります。
Reactバージョン18を17にダウングレードするにはまず、package.jsonファイルを開きます
package.jsonにある以下の行を変更します。
// package.json "react": "^17.0.2" "react-dom": "^17.0.2"
必ず、 "react"と"react-dom"両方のバージョンを変更して下さい。
次に再インストールします。
npm install // or yarn
この方法で、基本的には実際にnode_modulesを削除する必要はありません。
package.jsonのreactのバージョンを必要なバージョンに変更し、npm iを実行するだけです。
これにより、 packagejsonに配置した内容に基づいて、バージョンがアップグレードまたはダウングレードされるはずです。
ただし、必ずしもnode_modulesを削除する必要がないことを保証しているわけではありません。
古いバージョンのReactの依存関係が残っている可能性があります。そのため、一部のプロジェクトではnode_modulesディレクトリを手動で削除してから再インストールすることが推奨されることがあります。
その場合、次の解決策に進みます。
方法 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 18をアンインストールし、React 17をインストールすることで、バージョンが切り替わるはずです。
注意点として、他のパッケージやコンポーネントがReact 18に依存している場合、そのパッケージやコンポーネントも互換性のあるバージョンで利用できることを確認する必要があります。
最後の手段
プロジェクトのバックアップと新規インストールの方法となります。
この、プロジェクトのバックアップと新規インストールは、通常は最終手段として使用される方法です。
「方法４」まで試したが、うまくいかない場合や問題が解決できない場合に、バックアップと新規インストールを考慮することが稀にあります。
この方法は、いくつかのデメリットがあります。主なデメリットは、再設定や再作成の手間と時間がかかることです。プロジェクトのソースコードや設定をバックアップから復元する必要があります。
一般的には以下の手順で行われます。
⒈ プロジェクトのバックアップ
まず、現在のプロジェクトのバックアップを作成しますこれにより、必要な場合に元の状態に戻すことができます。
プロジェクトのディレクトリを選択：これには、バックアップしたいプロジェクトのソースコード、構成ファイル、依存関係などが含まれます。
バックアップファイルを保存する場所を選択：外部のハードドライブ、クラウドストレージ、別のディレクトリなどが選択肢になります。
プロジェクトのコピーを作成：選択したディレクトリから、プロジェクトのコピーを作成します。これにより、バックアップのために元のプロジェクトが保持されます。
バックアップファイルを作成：プロジェクトのコピーを選んだ場所に保存し、バックアップファイルを作成します。ファイル名には日付やバージョンなどの識別子を含めると良いでしょう。
バックアップファイルを安全な場所に保存し、管理する：作成したバックアップファイルを複数の場所に保存しておくことをおすすめします。また、定期的に新しいバックアップを作成し、古いバックアップを削除することで、バックアップの管理を行います。
これらの手順に従ってプロジェクトのバックアップを作成することで、重要なデータの損失を防ぐことができます。プロジェクトのバックアップは、予期せぬ問題や変更に備えるために、定期的に実施することが重要です。
⒉ プロジェクトの削除
現在のプロジェクトのディレクトリを削除します。これにより、既存のプロジェクトが完全に削除されます。
⒊ 新規プロジェクトの作成
新しくReactプロジェクトを作成します。これは、create-react-appやNext.jsなどのツールを使用して行うことができます。
新しいプロジェクトはReactバージョンをダウングレードした状態からスタートできます。
Reactバージョンをダウングレードしたい場合は、作成後に手動でReactのバージョンを変更する方法を使用する必要があります。
先ほど説明した手法（package.jsonの編集や依存関係のインストール）を使用して、プロジェクト内のReactバージョンをダウングレードすることができます。
⒋ 必要なパッケージのインストール
新しいプロジェクトで必要なパッケージや依存関係をインストールします。これには、必要なReactバージョンや他のライブラリが含まれます。
⒌ ソースコードの復元
バックアップからソースコードやその他の必要なファイルを復元します。これにより、元のプロジェクトの状態が再現されます。
プロジェクトのバックアップを使用してソースコードを復元する方法の手順を示します。
バックアップファイルの場所を確認：バックアップファイルは、前述の手順で選択した保存場所にあります。
バックアップファイルの解凍（必要な場合）：バックアップファイルが圧縮されている場合は、解凍ツールを使用してファイルを解凍します。通常は、zip形式などが使用されます。
復元するプロジェクトのディレクトリにバックアップファイルのコピーを作成：バックアップファイル内のソースコードや関連ファイルを、元のプロジェクトのディレクトリにコピーします。これにより、バックアップファイルの内容が復元先のディレクトリに配置されます。
必要に応じて依存関係をインストールします。プロジェクトに依存しているパッケージやライブラリがある場合は、プロジェクトディレクトリで依存関係をインストールする必要があります。これには、npm installやyarn installなどのコマンドを使用します。
プロジェクトをビルドまたは実行：プロジェクトがビルドスクリプトや実行コマンドを持っている場合は、それを実行してプロジェクトをビルドまたは実行します。
これにより、復元されたソースコードが正常に動作するか確認できます。
ただし、この手法は元のプロジェクトのソースコードや設定を再作成する手間がかかるため、時間と労力が必要です。
そのため、最初に他の方法を試してみることをおすすめします。ただし、万が一の場合に備えてバックアップを取ることは常に重要です。
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も同様です。
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」パッケージをスキップさせて再インストールして下さい。
上記の手順に従ってReact 17にダウングレードすることで、Next.jsプロジェクトのReactバージョンを変更することができます。
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バイナリが変更されて壊れます。
そのため、エラーが発生する原因となります。
解決策はあります。
「npm update --force」の--forceフラグで依存関係の競合を回避させます。
通常、npmは依存関係の解決を行い、既存の制約や競合を考慮してパッケージを更新します。
しかし、--forceフラグを使用すると、これらの制約や競合を無視し、パッケージの更新を強制的に行うことが可能になります。
ただし、--forceフラグを使用する場合は、注意が必要です。
パッケージの更新が必要な場合でも、依存関係の競合や互換性の問題が発生する可能性があるため、慎重に検討する必要があります。
一般的には、--forceフラグを使用する代わりに、依存関係の解決や競合の解決に他の手法を使用することが推奨されます。パッケージの更新には慎重さが求められるため、可能な限り問題のない方法を選択することが重要です。
または、「npm update --legacy-peer-deps」コマンドを実行します。
この、コマンドは、npmの依存関係解決の仕組みを変更するためのフラグです。
--legacy-peer-depsフラグは、以前の厳密な依存関係解決のルールを復活させるために使用されます。つまり、このフラグを指定すると、互換性のないバージョンの依存関係がある場合にエラーが発生します。
このフラグは、新しいnpmバージョンで依存関係の解決がうまくいかず、互換性のないバージョンが原因で問題が発生している場合に使用されることがあります。
ただし、注意が必要であり、依存関係の競合が発生したり、パッケージの正常な動作に影響を与える可能性があるため、慎重に使用してください。
どちらも、問題なく依存関係をインストールします。
この、手順に従ってNext.jsのバージョンを最新に更新することで、最新の修正や機能を取得し、安全で高速なWebサイトを提供することができます。
ただし、アップグレードには注意が必要であり、他の依存関係やカスタムコードとの互換性についても確認する必要があります。
最後に
Reactのバージョン18から17にダウングレードする方法を学ぶのは難しい事ではなく簡単です。
このプロセスは数秒以上かかることはなく、npmとyarnの両方で実行可能です。
Reactのバージョンをダウングレードまたはアップグレード(最新に更新)した場合は、必ず最上位ファイルである『src/index.js』のエントリポイントファイルを確認するようにして下さい。
React 18へのアップグレードも簡単で、変更の結果として既存のコードが壊れることはありません。
本日は以上となります。
最後までこの記事を読んで頂きありがとうございます。
この記事が役に立ったら、ブックマークと共有をしていただけると幸いです。
