Next.js Discord

Discord Forum

Not being compatible with Threejs

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
Avatar
Asiatic LionOP
Hey guys
In the code below : 
 "use client"
                        <Canvas 
                            className="w-full h-full"
                            style={{
                                position: 'fixed',
                                top: 0,
                                bottom: 0,
                                left: 0,
                                right: 0,
                                overflow: 'hidden',
                            }}
                            eventSource={document.getElementById('root') || undefined}
                        >


⨯ TypeError: Cannot read properties of undefined (reading 'ReactCurrentOwner')

What is wrong with this? just from the install and using it i've been getting error after error some nonesense not compatible errors
Why?
package.json :
{
  "name": "apple-threejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@gsap/react": "^2.1.1",
    "@react-three/drei": "^9.115.0",
    "@react-three/fiber": "^8.17.10",
    "gsap": "^3.12.5",
    "next": "15.0.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "three": "^0.169.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.1",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}
Answered by Anay-208
Now, just install it with --legacy-peer-deps
View full answer

23 Replies

Avatar
Anay-208
https://github.com/vercel/next.js/issues/66468

Closing since the latest version of @react-three/fiber has no support for React 19. You need to use @react-three/fiber@alpha when you're using Next.js 15 Canaries or Release Candidates.
Avatar
Asiatic LionOP
npm error Found: react@19.0.0-rc-0bc30748-20241028
npm error node_modules/react
npm error react@"19.0.0-rc-0bc30748-20241028" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@">=19.0" from @react-three/fiber@9.0.0-beta.1
npm error node_modules/@react-three/fiber
npm error @react-three/fiber@"^9.0.0-alpha.8" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
I can't install it
Avatar
Anay-208
Since you are using next 15, you also need to use react 19
Avatar
Asiatic LionOP
I have react 19
      "@gsap/react": "^2.1.1",
      "@react-three/drei": "^9.115.0",
      "@react-three/fiber": "^9.0.0-alpha.8",
      "gsap": "^3.12.5",
      "next": "15.0.1",
      "react": "19.0.0-rc-0bc30748-20241028",
      "react-dom": "19.0.0-rc-0bc30748-20241028",
      "three": "^0.169.0"
Avatar
Anay-208
According to your package.json, it says you've react 18
Avatar
Asiatic LionOP
I've changed it
This is my package.json now
Avatar
Anay-208
Now, just install it with --legacy-peer-deps
Answer
Avatar
Asiatic LionOP
K lemme try it
Thanks
Avatar
Anay-208
@Asiatic Lion If resolved, please mark solution
Avatar
Asiatic LionOP
Yea resolved thanks
Avatar
Anay-208
@Asiatic Lion?
Avatar
Asiatic LionOP
I can’t resolve it
Avatar
Anay-208
what err do you see?
Avatar
Asiatic LionOP
Error
This type of message is not supported
Make sure the author isn’t a bot and the post is indexed
Avatar
Anay-208
No, right click over this message
Avatar
Asiatic LionOP
Oh got it
Thanks