[Unhandled promise rejection: TypeError: null is not an object (evaluating 'gl.canvas.width')]

[haibert]

Hello,
I have just discovered this library and attempting to use it.

I have cloned the example project multiple times and every time I run the project I get error that gl.canvas is null.

Code

`
import { ExpoWebGLRenderingContext, GLView } from 'expo-gl'
import { Renderer, TextureLoader } from 'expo-three'
import * as React from 'react'
import {
AmbientLight,
BoxBufferGeometry,
Fog,
GridHelper,
Mesh,
MeshStandardMaterial,
PerspectiveCamera,
PointLight,
Scene,
SpotLight,
} from 'three'

export default function App() {
let timeout

React.useEffect(() => {
    // Clear the animation loop when the component unmounts
    return () => clearTimeout(timeout)
}, [])

return (
    <GLView
        style={{ flex: 1 }}
        onContextCreate={async (gl: ExpoWebGLRenderingContext) => {
            const {
                drawingBufferWidth: width,
                drawingBufferHeight: height,
            } = gl
            const sceneColor = 0x6ad6f0

            // Create a WebGLRenderer without a DOM element
            const renderer = new Renderer({ gl })
            renderer.setSize(width, height)
            renderer.setClearColor(sceneColor)

            const camera = new PerspectiveCamera(
                70,
                width / height,
                0.01,
                1000
            )
            camera.position.set(2, 5, 5)

            const scene = new Scene()
            scene.fog = new Fog(sceneColor, 1, 10000)
            scene.add(new GridHelper(10, 10))

            const ambientLight = new AmbientLight(0x101010)
            scene.add(ambientLight)

            const pointLight = new PointLight(0xffffff, 2, 1000, 1)
            pointLight.position.set(0, 200, 200)
            scene.add(pointLight)

            const spotLight = new SpotLight(0xffffff, 0.5)
            spotLight.position.set(0, 500, 100)
            spotLight.lookAt(scene.position)
            scene.add(spotLight)

            const cube = new IconMesh()
            scene.add(cube)

            camera.lookAt(cube.position)

            function update() {
                cube.rotation.y += 0.05
                cube.rotation.x += 0.025
            }

            // Setup an animation loop
            const render = () => {
                timeout = requestAnimationFrame(render)
                update()
                renderer.render(scene, camera)
                gl.endFrameEXP()
            }
            render()
        }}
    />
)

}

class IconMesh extends Mesh {
constructor() {
super(
new BoxBufferGeometry(1.0, 1.0, 1.0),
new MeshStandardMaterial({
map: new TextureLoader().load(require('./assets/icon.png')),
// color: 0xff0000
})
)
}
}

`

Here are my dependencies

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~41.0.1",
    "expo-gl": "~10.2.0",
    "expo-graphics": "^2.0.0",
    "expo-status-bar": "~1.0.4",
    "expo-three": "^5.7.0",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-41.0.0.tar.gz",
    "react-native-web": "~0.13.12",
    "three": "^0.128.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@types/react": "~16.9.35",
    "@types/react-native": "~0.63.2",
    "typescript": "~4.0.0"
  },
  "private": true
}

[chiliwax]

I have the exact same problem

[chiliwax]

I finally fix it by downgrading threejs

"three": "0.126.1"
"expo-three": "5.7.0"

hopefully that can help you :)

[migupry]

I finally fix it by downgrading threejs

"three": "0.126.1"
"expo-three": "5.7.0"

hopefully that can help you :)

@chiliwax, i've tried downgrading three to the mentioned version, to no luck...

Do you care to post the npm list of your project?

[migupry]

I didn't had to downgrade threejs.
I've found a simple workaround:
-Added the following statement inside onContextCreate function, before creating the Renderer:
gl.canvas = { width: gl.drawingBufferWidth, height: gl.drawingBufferHeight };

[swittk]

@migupry Encountered this too. Your solution works, thanks!

But now I'm wondering when this bug in Expo's GLView started. SDK 39 doesn't have this bug (I have an old project still on SDK 39, this hack isn't needed).

I'm currently using SDK 41, same as you.

Edit : OK I've looked at the GLView source code, it seems the canvas has always been null at the point that onContextCreate is called, so it's likely that this error is due to a change in how Three.JS initialized things, likely in initGLContext() according to the logs.

[swittk]

Might be this change in THREE.JS from 2 months ago, since it's the only place in that initGLContext() function that seems to reference the GL context.

It's in the WebGLState object.
mrdoob/three.js@f5c6b1c

Would need to check a bit, but I think this might be the cause of the problem.

[swittk]

OK, now those lines are definitely the cause of this problem.

Edit : Changed those mentioned lines to the original and now the bug is gone, I'm going to try and file a pull request.

[swittk]

This should be fixed with the next release of Three.JS 🎉

[igorroman777]

@migupry yes, it works, but then there was another problem

TypeError: undefined is not a constructor (evaluating 'new THREE.RectAreaLightHelper(whiteRectLight1)')

[migupry]

@migupry yes, it works, but then there was another problem

TypeError: undefined is not a constructor (evaluating 'new THREE.RectAreaLightHelper(whiteRectLight1)')

Hmm that's strange. I didn't face this. Care to post your code maybe? Maybe it makes sense to create a new issue, because this doesn't seem to be related to the inital error.

[igorroman777]

@migupry it worked before:
` const whiteRectLight1 = new THREE.RectAreaLight( WHITE_COLOR, intensity, lights_width, lights_height );
whiteRectLight1.position.set( 200, 185, -300 );
whiteRectLight1.lookAt( 200, 0, -300 );
scene.add( whiteRectLight1 );

  const rectLightHelper1 = new THREE.RectAreaLightHelper( whiteRectLight1 );
  whiteRectLight1.add( rectLightHelper1 );`

[migupry]

@migupry it worked before:
` const whiteRectLight1 = new THREE.RectAreaLight( WHITE_COLOR, intensity, lights_width, lights_height );
whiteRectLight1.position.set( 200, 185, -300 );
whiteRectLight1.lookAt( 200, 0, -300 );
scene.add( whiteRectLight1 );

  const rectLightHelper1 = new THREE.RectAreaLightHelper( whiteRectLight1 );
  whiteRectLight1.add( rectLightHelper1 );`

Ok, i've tested your code, and it does not work. But I'm 100% sure this is not releated to this issue.

Check this link.

RectAreaLightHelper has been dropped from ThreeJS core, and you need to import it as such:
import { RectAreaLightHelper } from "three/examples/jsm/helpers/RectAreaLightHelper.js";

Also, you need to adjust your code accordingly, so use:
new RectAreaLightHelper instead of new THREE.RectAreaLightHelper

[igorroman777]

@migupry ok, thank you very much,
yes, it works. There are other problems as well.
But it is a three.js update problem.