Cannot set property context of #<WebGLRenderer> which has only a getter

[stephent]

I was trying to reproduce the example stories/src/canvas/mapbox.stories.tsx in a local project. Relevant dependency versions which I need to use are:

    "@react-three/fiber": "8.15.16",
    "mapbox-gl": "^3.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-map-gl": "^7.1.7",
    "react-router-dom": "^6.23.1",
    "react-three-map": "^0.8.2",
    "three": "0.135"

I'm getting the following errors:

THREE.WebGLRenderer: .context has been removed. Use .getContext() instead.
three.module.js:49486
R3F.createRoot should only be called once!
index-8afac004.esm.js:1785
THREE.WebGLRenderer: .context has been removed. Use .getContext() instead.
three.module.js:49486
Uncaught TypeError TypeError: Cannot set property context of #<WebGLRenderer> which has only a getter
    at applyProps$1 (.../use-mapbox-gl-js-with-react/node_modules/@react-three/fiber/dist/index-8afac004.esm.js:744:26)
    at configure (.../use-mapbox-gl-js-with-react/node_modules/@react-three/fiber/dist/index-8afac004.esm.js:1981:106)
    at <anonymous> (.../use-mapbox-gl-js-with-react/node_modules/react-three-map/src/core/canvas-in-layer/use-root.tsx:21:10)

It looks like the react-three-map should work with versions of three as old as 0.133.0 from the peer dependencies.

Anything obvious I should check?

Also, is the package compatible with MapBox GL JS v3.x?

Thanks!

[stephent]

After some further digging, it appears that things break with [email protected] or earlier. From 0.141.0 onwards, it's working fine.

Also, setting overlay={true} is a workaround for [email protected] - although less than ideal.

[H-Hp]

hi
It appears that the issue you're facing is related to the compatibility between the versions of the libraries you're using, specifically three.js and @react-three/fiber.

The error THREE.WebGLRenderer: .context has been removed. Use .getContext() instead. is a known issue that was introduced in three.js version 0.135.0. The context property was removed from the WebGLRenderer class, and the getContext() method should be used instead.

Unfortunately, the version of @react-three/fiber (8.15.16) that you're using may not be compatible with three.js version 0.135.0. The @react-three/fiber library is a wrapper around three.js, and it needs to be updated to handle the changes introduced in the newer version of three.js.

As for the react-three-map library, it appears to be compatible with mapbox-gl version 3.x. However, it's possible that the compatibility issues with three.js and @react-three/fiber are also affecting the react-three-map library.

Here are a few things you can try to resolve the issue:

1. Update @react-three/fiber and three.js: Try updating @react-three/fiber to the latest version (currently 8.17.2) and three.js to a version compatible with the updated @react-three/fiber. You can check the peer dependencies of @react-three/fiber to find the compatible version of three.js.

2. Downgrade three.js: If updating @react-three/fiber is not an option, you can try downgrading three.js to a version lower than 0.135.0, which should be compatible with the version of @react-three/fiber you're using (8.15.16). However, keep in mind that this may introduce other compatibility issues or security vulnerabilities.

3. Check the react-three-map compatibility: Reach out to the react-three-map maintainers or check their documentation to ensure that the library is compatible with the versions of three.js, @react-three/fiber, and mapbox-gl that you're using.

4. Use a different mapping library: If you're having trouble with react-three-map, you could consider using a different library for integrating Mapbox with React and Three.js, such as react-map-gl or @deck.gl/mapbox.

It's worth noting that working with different libraries and their dependencies can be challenging, especially when dealing with compatibility issues. If you're unable to resolve the issue, you may need to reevaluate your approach or consider alternative solutions.

[stephent]

@H-Hp thank you for the detailed reply! The R3F version (8.15.16) is from early this year - much more recent than three.js r135, so I'm slightly puzzled. The simplest explanation is that the call is a pass through from react-three-map via r3f to three, but I can't quite trace it through the source code enough to convince myself that's the case.

Either way, my project is currently pinned at r135 because of a very obscure and as yet unsolved issue related to lighting problems on unmounting and remounting the Canvas. I think the best approach is going to be to refactor that all out into a separate app so I never have to mount/unmount the three.js stuff, and hopefully then I can simply update everything and move forward. It's a chunk of work, but I suspect it's the best path.

Thanks for taking the time to respond so thoroughly.