three版本：^0.140.2@react-three/fiber版本：^8.0.19@react-three/drei版本：^9.11.0node版本：14.18.13npm(或纱线)版本：1.22.17(纱线)react版本：17.0.1react-dom版本：17.0.1
问题描述：
在我的NextJS应用程序上实现react three drei，当转到导入react three-drei的页面时出错，如下所示：./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
预期：
我转到"新"页面，然后我可以使用useGLTF从HTML输入标签加载.glb格式的三维模型
相关代码：
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 }
建议的解决方案：
此时，我认为错误的根本原因是我使用的react three drei不支持react@17.0.1.我期望之前的react三个drei版本支持react@17.0.1然后真的想知道支持什么特定版本react@17.0.1或者这个错误可能是由其他原因引起的。谢谢你的支持，这一直是我的荣幸。
这是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"
]
}
}
对我有效的一些可能的解决方案是：
-
在安装
@react-three/fibre或@react-three/drei时运行--legacy-peer-deps -
通过以下命令安装react three：
npm安装三个@类型/三个@反应三个/光纤希望能帮助