あるWebサービスの開発メモ・React v18 から v17 へのダウングレードについて #Docker

あるWebサービスの開発メモ・目次ページに戻る

なぜダウングレードするのか

2022年3月に React v18 が公開されました。はじめはこれを利用していたのですが、mui を使っていくなかで原因不明のエラーが発生してしまい、React v18 から v17 にダウングレードして開発を進めていました。

その後 React v18 を使用する際に mui のインストール時にオプションを追加することでエラーを回避できることを知り、React v18 に再挑戦しました。

動作検証したところ、mui の問題は回避できましたが、新たな問題が起きてしまいました。

本サービスでは Swiper コントロールを利用しているのですが、React v18 では autoplay が動作しなくなってしまい、検討した結果、再度ダウングレードすることにしました。

「どうやってダウングレードするんだっけ？」ということになり、以下に手順をまとめておこうとしています。

ダウングレードのしくみ

こちらのページでしっかり教えていただけます

React v18から17にダウングレードする方法

ダウングレードを試す環境を構築する

root@sirokuro-try:/var/www/html# npx create-next-app . --typescript
Need to install the following packages:
  create-next-app@12.2.5
Ok to proceed? (y) y
Creating a new Next.js app in /var/www/html.

(snip)

Success! Created html at /var/www/html

npm notice
npm notice New minor version of npm available! 8.15.0 -> 8.18.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.18.0
npm notice Run npm install -g npm@8.18.0 to update!
npm notice
root@sirokuro-try:/var/www/html#

バージョン確認

root@sirokuro-try:/var/www/html# npm list --depth=0
html@0.1.0 /var/www/html
+-- @types/node@18.7.6
+-- @types/react-dom@18.0.6
+-- @types/react@18.0.17
+-- eslint-config-next@12.2.5
+-- eslint@8.22.0
+-- next@12.2.5
+-- react-dom@18.2.0
+-- react@18.2.0
`-- typescript@4.7.4

root@sirokuro-try:/var/www/html#

ダウングレード対象の選別とダウングレードバージョンの決定

React v18から17にダウングレードする方法　で教えていただいた内容によりますと、

react@18.2.0 と @types/react@18.0.17
@17.0.2 (2021年3月リリース) にダウングレードします
react-dom@18.2.0 と @types/react-dom@18.0.6
これも @17.0.2 にダウングレードします
next@12.2.5
@12.1.2 にダウングレードします

ダウングレードの方式

React v18から17にダウングレードする方法では以下の方式を示されています。

方法１: package.json のバージョンを書き換えて yarn する

これでうまくいかない場合は次の策を示されていますので、まずは方法１にチャレンジしてみます

(package.json)

{
  "name": "html",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.2.5",
    "react": "18.2.0",
    "react-dom": "18.2.0"
  },
  "devDependencies": {
    "@types/node": "18.7.6",
    "@types/react": "18.0.17",
    "@types/react-dom": "18.0.6",
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5",
    "typescript": "4.7.4"
  }
}

(書き換えたもの)

{
  "name": "html",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "next": "12.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@types/node": "18.7.6",
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.2",
    "eslint": "8.22.0",
    "eslint-config-next": "12.2.5",
    "typescript": "4.7.4"
  }
}

(yarn)

root@sirokuro-try:/var/www/html# yarn
yarn install v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 39.65s.
root@sirokuro-try:/var/www/html#

(バージョン確認)

root@sirokuro-try:/var/www/html# npm list --depth=0
html@0.1.0 /var/www/html
+-- @types/node@18.7.6
+-- @types/react-dom@17.0.2
+-- @types/react@17.0.2
+-- eslint-config-next@12.2.5
+-- eslint@8.22.0
+-- next@12.1.2
+-- react-dom@17.0.2
+-- react@17.0.2
`-- typescript@4.7.4

root@sirokuro-try:/var/www/html#

すばらしい

eslint-config-next@12.2.5 がちょっと気になりますが、