Visgl from React-map-gl Repository

Other

29 Sep 2022

Daraole18

started

Started On 29 Sep 2022 at 08:49:55

JoeyKo

started

Started On 29 Sep 2022 at 01:43:43

Fabdotnet

started

Started On 28 Sep 2022 at 05:29:28

Outlandnish

started

Started On 27 Sep 2022 at 09:58:00

MarwenLabidi

started

Started On 27 Sep 2022 at 07:01:18

MarwenLabidi

started

Started On 27 Sep 2022 at 06:58:37

Ziptrail

started

Started On 27 Sep 2022 at 03:33:45

A2RJ

started

Started On 27 Sep 2022 at 11:20:45

ShivamSainier

React friendly API wrapper around MapboxGL JS

Forked On 27 Sep 2022 at 09:36:51

Aleksailosey

started

Started On 26 Sep 2022 at 11:16:57

Spencerjsmall

started

Started On 26 Sep 2022 at 03:32:03

Unbelief

started

Started On 26 Sep 2022 at 02:19:54

Tokenosopher

started

Started On 25 Sep 2022 at 03:42:45

Ansango

started

Started On 25 Sep 2022 at 08:44:27

Dalakatt

started

Started On 24 Sep 2022 at 08:18:06

Mmorton

started

Started On 23 Sep 2022 at 07:53:59

Gouigouix

started

Started On 23 Sep 2022 at 02:27:29

Fers4t

started

Started On 23 Sep 2022 at 11:05:59

Flipasg

started

Started On 23 Sep 2022 at 07:21:52

Katsos

started

Started On 23 Sep 2022 at 05:04:20

Rabira-hierpa

started

Started On 22 Sep 2022 at 08:29:27

Thaolethac

React friendly API wrapper around MapboxGL JS

Forked On 22 Sep 2022 at 04:44:01
Issue Comment

Brncsk

[Bug] Invalid type: 'container' must be a String or HTMLElement.

Description

We get an error "Invalid type: 'container' must be a String or HTMLElement." under certain circumstances which are flaky and unclear. The stack trace points to react-map-gl, but this is using a error logging system and local reproduction has not proven successful.

Here is my theory as to what is happening (note: it was difficult to find documentation regarding the React lifecycle as it pertains to what is mentioned below):

  1. The Map mounts, which kicks off the library load, and that is in progress
  2. Now, Map begins an unmount for whatever reason.
  3. containerRef.current gets set to null as part of the unmount
  4. The library load finishes, and hence the rest of the promise runs. It checks isMounted, which is still set to true, and hence continues running. It runs mapbox = new Mapbox(mapboxgl.Map, props, containerRef.current);, which fails with the above error as containerRef.current is null.
  5. The useEffect cleanup function runs and sets isMounted to false, which would have made the promise stop running, but alas too late.

Now whether this theory works depends on at least two things

  1. Refs getting nulled out before useEffect cleanup is run
  2. async code being able to run between the ref clearing and useEffect cleanup happening

I don't know about the second point, but an experiment with React (17.0.2) roughly as follows

 useEffect(() => {
    console.log('XXX USE EFFECT');
    return () => {
      console.log('XXX USE EFFECT CLEANUP');
    }
  }, []);

  return <div ref={(item) => console.log('XXX SET REF', item)} />; 

prints

  • XXX SET REF <div>
  • XXX USE EFFECT [navigate away]
  • XXX SET REF null
  • XXX USE EFFECT CLEANUP

which seems to support that refs are cleared before useEffect cleanups are run.

Assuming this theory seems plausible, it perhaps would be better to check for the presence of containerRef.current in addition to the isMounted check. (from what I can tell, containerRef is guaranteed to be set from the first render before useEffect runs, so long as it doesn't get cleared by an unmount)

Expected Behavior

No error message

Steps to Reproduce

Unknown :(

Environment

  • Framework version: react-map-gl@7.0.15
  • Map library: mapbox-gl@2.8.1
  • Browser: Various, including Chrome 104.0.0
  • OS: Various, including Windows 10

Logs

No response

Forked On 22 Sep 2022 at 06:53:03

Brncsk

Happens to me as well when the map is inside a <Suspense> container and is being suspended.

Commented On 22 Sep 2022 at 06:53:03

Mattegan111

started

Started On 22 Sep 2022 at 04:32:33

Spencerhcheng

React friendly API wrapper around MapboxGL JS

Forked On 21 Sep 2022 at 10:51:24

About Repository

React friendly API wrapper around MapboxGL JS
Language: TypeScript
Star: 6768
Fork: 1213
Watchers: 6768
Open Issues: 25
https://github.com/visgl/react-map-gl
Other
Last updated: 29 Sep 2022
Tropics: