React Three Drei can't resolve react-dom/client 17.0.1 - reactjs

Question

three version:^0.140.2
#react-three/fiber version:^8.0.19
#react-three/drei version:^9.11.0
node version:14.18.13
npm (or yarn) version: 1.22.17 (yarn)
react version:17.0.1
react-dom version:17.0.1
Problem description:
Implementing react three drei above my NextJS app getting an error when go to the page which import react three drei, like the following:
./node_modules/#react-three/drei/web/Html.js:3:0 Module not found: Can't resolve 'react-dom/client' Import trace for requested module: ./node_modules/#react-three/drei/index.js ./components/Model3D/ThreeDModel.js ./pages/new.js
Expected:
I go to 'new' page, then I can load 3d model with .glb format from HTML input tag using useGLTF
Relevant Code:
import React from 'react'
import { useGLTF } from '#react-three/drei/core/useGLTF'
import { OrbitControls } from '#react-three/drei'
import { parseImgUrl } from 'utils/common'
const Model1 = ({ threeDUrl }) => {
const loadedGltf = useGLTF(parseImgUrl(threeDUrl), true)
return (
<>
<primitive object={loadedGltf.scene} dispose={null} />
<OrbitControls />
<ambientLight />
</>
)
}
export { Model1 }
Suggested Solution:
At this time, I think root cause of the error is that my react three drei which I used don't supported react#17.0.1. I expected that previous react three drei version support react#17.0.1 then really wonder what specified version that support react#17.0.1 or maybe the error was caused by other things. Thank you for your support, that's always my pleasure.
This is the entire dependencies within package.json
{
"name": "paras-v2-landing",
"version": "0.1.0",
"private": true,
"type": "module",
"scripts": {
"dev": "next dev",
"dev:testnet": "PORT=8081 dotenv -e .env.testnet next dev",
"dev:mainnet": "PORT=8082 dotenv -e .env.mainnet next dev",
"build": "next build",
"start": "next start",
"lint": "next lint",
"format": "prettier --write .",
"prettier-check": "prettier --check .",
"prepare": "husky install"
},
"dependencies": {
"#draft-js-plugins/anchor": "^4.1.1",
"#draft-js-plugins/buttons": "^4.0.0",
"#draft-js-plugins/divider": "^4.1.1",
"#draft-js-plugins/editor": "^4.0.0",
"#draft-js-plugins/focus": "^4.1.0",
"#draft-js-plugins/image": "^4.0.0",
"#draft-js-plugins/inline-toolbar": "^4.1.0",
"#draft-js-plugins/linkify": "^4.1.0",
"#draft-js-plugins/static-toolbar": "^4.0.0",
"#draft-js-plugins/video": "^4.1.0",
"#react-three/drei": "^9.11.0",
"#react-three/fiber": "^8.0.19",
"#sentry/nextjs": "^6.12.0",
"#tailwindcss/line-clamp": "^0.3.1",
"axios": "^0.21.0",
"blurhash": "^1.1.3",
"cachios": "^3.0.0",
"capitalize": "^2.0.4",
"cids": "^1.1.5",
"compressorjs": "^1.0.7",
"croppie": "^2.6.5",
"draft-js": "^0.11.7",
"file-type": "^16.5.3",
"generate-avatar": "^1.4.10",
"javascript-time-ago": "^2.3.2",
"js-base64": "^3.5.2",
"js-cookie": "^2.2.1",
"jsbi": "^3.1.4",
"near-api-js": "^0.42.0",
"next": "^12.1.6",
"postcss": "^8.4.12",
"query-string": "^7.0.1",
"react": "^18.1.0",
"react-awesome-animated-number": "^1.0.6",
"react-blurhash": "^0.1.3",
"react-card-flip": "^1.1.5",
"react-content-loader": "^6.0.3",
"react-custom-scrollbars": "^4.2.1",
"react-dom": "^18.1.0",
"react-fast-marquee": "^1.1.3",
"react-google-recaptcha": "^2.1.0",
"react-hamburgers": "^1.0.0",
"react-hook-form": "^6.10.0",
"react-horizontal-scrolling-menu": "^2.7.0",
"react-infinite-scroll-component": "^5.1.0",
"react-intl": "^5.9.2",
"react-linkify": "^1.0.0-alpha",
"react-responsive-carousel": "^3.2.23",
"react-share": "^4.3.1",
"react-slick": "^0.28.1",
"react-tooltip": "^4.2.17",
"recharts": "^2.1.9",
"slick-carousel": "^1.8.1",
"swr": "^1.2.2",
"three": "^0.140.2",
"three-stdlib": "^2.10.1",
"uuid": "^8.3.2",
"zustand": "^3.1.3"
},
"devDependencies": {
"#next/bundle-analyzer": "^12.1.4",
"autoprefixer": "^10.4.4",
"dotenv-cli": "^4.1.1",
"eslint": "^7.30.0",
"eslint-config-next": "^11.0.1",
"eslint-config-prettier": "8.3.0",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^7.0.0",
"lint-staged": "^11.1.2",
"postcss-import": "^13.0.0",
"postcss-preset-env": "^6.7.0",
"prettier": "2.4.1",
"pretty-quick": "^3.1.2",
"tailwindcss": "^3.0.23"
},
"license": "GPL-3.0",
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,jsx}": [
"eslint --fix",
"git add"
],
"*.{html,css,less,ejs}": [
"git add"
]
}
}