Context Lost

[Immerhaze]

hey! I have been learning three js for a couple of days, I came across this way to mix it with react js. so it's been pretty interesting, I've made a couple of standard things that i was able to make with the documentation. when I started to add the react js part to it (as a normal navbar) it came across this bug that is happening almost randomly, sometimes the scene will render with no problem, and other times it won't.

I get the feeling that is a problem between the dom from react js and the scene from fiber, you can take a look at the files, not a lot of lines done yet since I haven't been able to make progress because of the issue

import React, { useRef, useState } from 'react'
import { Canvas, useFrame, useLoader } from '@react-three/fiber'
import styledComponents from 'styled-components'
import { TextureLoader } from 'three/src/loaders/TextureLoader'
import { Stars, useTexture } from '@react-three/drei'
import Nav from './Nav'

const name = `moonyNormal.jpg`

function Box(props) {
  // This reference gives us direct access to the THREE.Mesh object
  const ref = useRef()
  // Hold state for hovered and clicked events
  const [hovered, hover] = useState(false)
  const [clicked, click] = useState(false)
  // Subscribe this component to the render-loop, rotate the mesh every frame
  useFrame((state, delta) => (ref.current.rotation.x += 0.01))
  //texture
  const normalMap = useLoader(TextureLoader, name)
  // Return the view, these are regular Threejs elements expressed in JSX
  return (
    <mesh
      {...props}
      ref={ref}
      scale={clicked ? 1.5 : 1}
      onClick={(event) => click(!clicked)}
      onPointerOver={(event) => hover(true)}
      onPointerOut={(event) => hover(false)}
    >
      <sphereGeometry args={[1, 64, 64]} />
      <meshStandardMaterial color={'gray'} displacementScale={0.2} normalMap={normalMap} />
    </mesh>
  )
}

export default function App() {
  return (
    <Container>
      <Nav />
      <Canvas>
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
        <pointLight position={[-10, -10, -10]} />
        <Box position={[0.3, 0, 0]} />
        <Stars />
      </Canvas>
    </Container>
  )
}

const Container = styledComponents.div`
  height:100vh;
  background:black;
  width:100vw;
  overflowx:hidden;
`
const Info = styledComponents.div`
  width:100vw;
  height:100vh;
`

[drcmda]

no problems are known atm, i think it most likely is something with your local environment. if that little example crashed randomly we'd hear it from thousands of people.

best try to make a repro, because that code is just common. context loss usually happens when the browser has enough, it has a fixed limit on the amount of canvases it can produce (10-20), after that it will crash any canvas trying to get a context. threejs also deliberately forces context loss when you unmount the canvas, that is done to force the browser to release memory but it is completely harmless.

ps. this is not good:

import { TextureLoader } from 'three/src/loaders/TextureLoader'

this is not how npm works, you're bypassing resolve which likely results in multiple three's being loaded.

either from "three" or just use useTexture from drei. that could also be related to the issue you're facing.

[Immerhaze]

I understand, it makes sense thank you for the speedy answer! i appreciate it