• three版本：^0.140.2
• @react-three/fiber版本：^8.0.19
• @react-three/drei版本：^9.11.0
• node版本：14.18.13
• npm（或yarn）版本：1.22.17（Yarn）
• react版本：17.0.1
• react-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

预期：

我去'新'页，然后我可以加载3D模型与.glb格式从HTML输入标记使用useGLTF

相关编码：

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 three 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"
        ]
    }
}