import ReactDOM from 'react-dom/client';でエラー、そして修正

事の発端

整理券アプリを作っていたところ、import ReactDOM from 'react-dom/client';にてエラーがでた。

エラーの詳細

モジュール 'react-dom/client' の宣言ファイルが見つかりませんでした。
'~/node_modules/react-dom/client.js' は暗黙的に 'any' 型になります。
存在する場合は npm i --save-dev @types/react-dom を試すか、
declare module 'react-dom/client'; を含む新しい宣言 (.d.ts) ファイルを追加します

tsconfig.jsonの中身

tsconfig.jsonで直接編集しようとした。これが実際に関係あるかは知らない。

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react", // or "react-jsx" (React 17+)
    "lib": ["DOM", "DOM.Iterable", "ESNext"],

    /* Node.jsのモジュール解決など */
    "moduleResolution": "node",
    "esModuleInterop": true,

    /* 型チェック */
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

解決策

npm i --save-dev @types/react-domでも以下のようなエラーがでた

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: react-scripts@5.0.1
npm ERR! Found: typescript@5.7.2
npm ERR! node_modules/typescript
npm ERR!   peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3
npm ERR!   node_modules/fork-ts-checker-webpack-plugin
npm ERR!     fork-ts-checker-webpack-plugin@"^6.5.0" from react-dev-utils@12.0.1
npm ERR!     node_modules/react-dev-utils
npm ERR!       react-dev-utils@"^12.0.1" from react-scripts@5.0.1
npm ERR!       node_modules/react-scripts
npm ERR!         react-scripts@"5.0.1" from the root project
npm ERR!   peer typescript@">=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta" from tsutils@3.21.0
npm ERR!   node_modules/tsutils
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/eslint-plugin@5.62.0
npm ERR!     node_modules/@typescript-eslint/eslint-plugin
npm ERR!       @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!       node_modules/eslint-config-react-app
npm ERR!         eslint-config-react-app@"^7.0.1" from react-scripts@5.0.1
npm ERR!         node_modules/react-scripts
npm ERR!       1 more (eslint-plugin-jest)
npm ERR!     tsutils@"^3.21.0" from @typescript-eslint/type-utils@5.62.0
npm ERR!     node_modules/@typescript-eslint/type-utils
npm ERR!       @typescript-eslint/type-utils@"5.62.0" from @typescript-eslint/eslint-plugin@5.62.0
npm ERR!       node_modules/@typescript-eslint/eslint-plugin
npm ERR!         @typescript-eslint/eslint-plugin@"^5.5.0" from eslint-config-react-app@7.0.1
npm ERR!         node_modules/eslint-config-react-app
npm ERR!         1 more (eslint-plugin-jest)
npm ERR!     1 more (@typescript-eslint/typescript-estree)
npm ERR!   1 more (the root project)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR! node_modules/react-scripts
npm ERR!   react-scripts@"5.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: typescript@4.9.5
npm ERR! node_modules/typescript
npm ERR!   peerOptional typescript@"^3.2.1 || ^4" from react-scripts@5.0.1
npm ERR!   node_modules/react-scripts
npm ERR!     react-scripts@"5.0.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /Users/ユーザー名/.npm/_logs/2025-01-03T13_31_46_427Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /Users/ユーザー名/.npm/_logs/2025-01-03T13_31_46_427Z-debug-0.log

エラーによると、React Scripts 5.0.1 が要求している TypeScript のバージョンと、ユーザーが現在インストールしている TypeScript 5.7.2 が依存関係の競合を起こしているみたい。

だから、TypeScript のバージョンを React Scripts に合わせて「4.x 系」に下げてみた。

#既存の TypeScript 5.7.2 をアンインストール
npm uninstall typescript

#TypeScript 4.x 系(4.9.5 など) を再インストール
npm i --save-dev typescript@4.9.5

#必要な型定義パッケージも一緒に(あるいは改めて)インストール
npm i --save-dev @types/react @types/react-dom

そして解決。

感想

結局バージョンの話でした。