React18→React17にダウングレードした際に起こったエラーを解決した話

前回の記事の続きになります

こちらの動画を参考にさせていただきます

https://www.youtube.com/watch?v=MzJkWO73S70&list=PLX8Rsrpnn3IVOk48awq_nKW0aFP0MGpnn

開発環境

OS:mac
エディタ：vscode

開発途中でReact１８からReact１７にダウングレードしたためにいろんなエラーが発生した

エラー発生

エラー文

Module not found: Error: Can't resolve 'react-dom/client' in '/User/~~/chatbot-demo/src'

ぐぐってみるとダウングレードに伴ってモジュールのパスがみつかっていないということらしい。

のでルートディレクトリに以下のコマンドを叩いてみた

ターミナル

$ npm install react-dom@17.0.2

インストール完了後にnpm startすると同じエラーが発生したので
前回の記事に引き続き
・package-lock.json
・node_modules
を削除してnpm installしてみる

（このあたりのエラーはpackage-lock.jsonとnode_modulesを削除してnpm installすると解決することが多いらしいので同じようなことでお困りの方は試してみるのがいいかも？）

しかし、またもやエラーに。

原因と解決方法

React１８とReact１７ではindex.jsの記述方法に違いがあったため
src/index.jsの記述をReact１７に合うように変更する必要があるらしい

index.js

import React from 'react';
// import ReactDOM from 'react-dom/client';　←React18では必要
import {render} from 'react-dom'; //←React17ではこちら
import './assets/styles/index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

// const root = ReactDOM.createRoot(document.getElementById('root')); React18で必要
const root = document.getElementById('root'); //←React17ではこちら
render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  root
);

コメントアウトしているところがReact１８で必要な記述方法で
React１７で必要な記述方法はその直下に書いてみた。

無事エラーを吐かずにダウングレードに伴うエラーを解決できた。

所感

開発途中でバージョンをかえるというのは色々な依存関係で問題が起きそうで怖かったですが
次々にでてくるエラーを一つ一つ向き合って解決できたのは初心者エンジニアとして一歩成長できた気がします。