Next.js Discord

Discord Forum

Not being compatible with Threejs

Answered
Asiatic Lion posted this in #help-forum
Open in Discord
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 | Ping in replies
Now, just install it with --legacy-peer-deps
View full answer

23 Replies


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.
@Anay-208 | Ping in replies > > 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.
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
Anay-208 | Ping in replies
Since you are using next 15, you also need to use 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"
Anay-208 | Ping in replies
Now, just install it with --legacy-peer-deps
Answer
Asiatic LionOP
K lemme try it
Thanks
@Anay-208 | Ping in replies Now, just install it with `--legacy-peer-deps`
Anay-208 | Ping in replies
@Asiatic Lion If resolved, please mark solution
@Anay-208 | Ping in replies <@760653894048546868> If resolved, please mark solution
Asiatic LionOP
Yea resolved thanks
Anay-208 | Ping in replies
@Asiatic Lion?
@Anay-208 | Ping in replies <@760653894048546868>?
Asiatic LionOP
I can’t resolve it
@Asiatic Lion I can’t resolve it
Anay-208 | Ping in replies
what err do you see?
Asiatic LionOP
Error
This type of message is not supported
Make sure the author isn’t a bot and the post is indexed
Asiatic LionOP
Oh got it
Thanks