New version (5.0.0) does not show Features when loading the component for the first time #904

kaligrafy · 2020-10-27T18:20:17Z

With version 4.8.6, everything works fine, but the latest version (5.0.0) does not show any Feature for any Layer when first rendering the Map component. However, after using an onClick event function on the Map, it can update the coordinates of a Feature and then the Feature appears on the map.

JulienMelissas · 2020-10-28T00:53:54Z

I am seeing this issue as well. I thought it had to do with the way I was loading the CSS, but I tried via an import as well as just including it in the <head> and I still am getting a blank map on first load.

kaligrafy · 2020-10-28T00:57:54Z

Markers works fine though...

JulienMelissas · 2020-10-28T01:03:38Z

Only problem now is that when I downgrade back to 4.8.6 my onClick events stop firing on the layers, whereas updating to 5.0.0 worked 😕 ... I'll see if there's something I can figure out here.

grillorafael · 2020-11-01T20:13:43Z

Having the same issue. Changed back to 4.8.6 and it works again

spina-a-d · 2020-11-04T19:17:16Z

Same problem also fixed by moving to 4.8.6. Also pop-ups are broken and render below the map.

gl03 · 2020-11-09T19:11:25Z

I can also confirm this. Installed 5.0.0 as a first-time user and spent the next hours staring at my code, the examples, and the docs. installing react-mapbox-gl@4.8.6 finally displayed my Layers. A true show stopper this bug, wow.

JulienMelissas · 2020-11-09T19:16:25Z

I can also confirm this. Installed 5.0.0 as a first-time user and spent the next hours staring at my code, the examples, and the docs. installing react-mapbox-gl@4.8.6 finally displayed my Layers. A true show stopper this bug, wow.

Oof. Yeah, I haven't been able to dig into this any further to figure out what it could be.

Nostin · 2020-11-12T10:32:00Z

I can also confirm this. Installed 5.0.0 as a first-time user and spent the next hours staring at my code, the examples, and the docs. installing react-mapbox-gl@4.8.6 finally displayed my Layers. A true show stopper this bug, wow.

Me too. This issue is a breaking change and the map isn't fit for purpose at the moment in 5.0.0 so I would urge swift remediation. Especially if you're using something like the latest Next.JS which disallow global CSS import from node_modules so you can't just revert back to 4.8.6

Mahdi-Esbati · 2020-11-15T10:10:32Z

@alex3165
This is another issue with Mapbox v5.0.0 and I assume it is caused by this commit.

I'm using Next.js. When I change a code that causes a hot reload on the map component ( example: changing the markers ) all the features are displayed properly, but as soon as I refresh the page all the features disappear from the map.

Mahdi-Esbati · 2020-11-16T14:12:50Z

Finally, I found the source of this issue.
as I mentioned before, this issue is caused by this merge request of the v5.0.0.
The file causing this issue is map-events.ts.
If you replace this file with the v4.8.6 one, the issue is fixed.
I did not research why the v5.0.0 map-events.ts causes this issue, but if I find the main source of this bug,
I'll try to submit a pull request to fix it.

conordavidson · 2020-11-16T16:41:44Z

Encountered this issue as well on Next.js v10.0.1. I ended up copying the lib-esm folder from v4.8.6 into my project. I tried forking v4.8.6 and removing the style import, but couldn't get builds working on my machine. Pulling the build folder from v4.8.6 into my project directly (into a vendor/react-mapbox-gl directory) removed the disallow global CSS import from node_modules error since I was no longer referencing an npm package.

Not a long-term fix, but works for anybody who's encountering it.

Gatsby wouldn't build with the older libraries -- see mapbox/mapbox-gl-js#4593 for full context. Note that dev mode worked. Avoided v5 of react-mapbox-gl as I encountered this bug: alex3165/react-mapbox-gl#904 This commit also adds updates the package-lock and removes a linting error which prevented TravisCI passing

dispatchr1 · 2020-12-19T01:05:58Z

Also having this problem with create react app 4, version 5.1.1 of this lib.

JClackett · 2021-02-05T15:15:56Z

Any updates with this? quite a breaking change, I've tried changing the map-events.ts file but that doesn't seem to fix the issue.

Georift · 2021-02-16T04:22:40Z

@alex3165, @mklopets things seem a little quiet in this repo. Would you have a moment to look at this issue and maybe point us in a direction? I'm happy to offer some of my time to dig into this but I'd love to hear from you that the change would be accepted.

mklopets · 2021-02-16T06:05:11Z

@Georift a PR would be greatly appreciated indeed. Sorry about the silence, everybody.

Georift · 2021-02-16T06:10:09Z

@Georift a PR would be greatly appreciated indeed. Sorry about the silence, everybody.

No worries! Appreciate the fast reply. I'll take a look into it this weekend.

Current work around would be downgrading your local react-mapbox-gl to v4.8.6

wallstar · 2021-02-20T20:55:29Z

This is also a workaround, but I set onStyleLoad to change the zoomLevel an imperceptible amount and the features look like they load normally.

  const [zoomLevel, setZoomLevel] = useState(12);
  return (
    <Map
      
      containerStyle={{
        height: '100%',
        width: '100%',
      }}
      center={points[activeIndex]}
      zoom={[zoomLevel]}
      onStyleLoad={() => setZoomLevel(12.001)}
      movingMethod="flyTo"
    >

SiddharthMantri · 2021-02-25T17:14:45Z

As @Mahdi-Esbati mentioned, the error stems from map-events.ts and I believe this is the errant line:

669bd38#diff-d2e7ea38f9a45638da94987edfdc9ac3a96fbeebe504301bc0d9b9825989a63fR139

The check should be:

listeners[eventKey] && typeof currentProps[eventKey] === 'function'

The way i've fixed it in my use case is like this: #927 (comment)

rustygloves · 2021-07-22T14:13:54Z

This is also a workaround, but I set onStyleLoad to change the zoomLevel an imperceptible amount and the features look like they load normally.

@wallstar Thanks for this tip!
Seems like it's the the setZoomLevel causing a re-render that gets the Features to render, the state you update doesn't even need to be linked to the Map itself. At least that's what I found in my use case.

Ahmdrza · 2022-10-19T14:34:18Z

is there any update on this issue?

baedyl · 2022-11-23T15:20:53Z

@Georift a PR would be greatly appreciated indeed. Sorry about the silence, everybody.

No worries! Appreciate the fast reply. I'll take a look into it this weekend.

Current work around would be downgrading your local react-mapbox-gl to v4.8.6

The current workaround does not work with Next.

Still no PR ??? This issue is really frustrating...

cloudlena · 2022-11-23T15:22:32Z

@baedyl, it would be great if you could make a PR. Thanks for looking into it!

baedyl · 2022-11-23T15:31:25Z

@cloudlena I would love to make a PR fixing this issue... Unfortunately, all the workarounds provided in this thread (and others) don't seem to resolve the issue on our end. So, right now I have no clue how to solve this problem.
Mapbox seemed like a good alternative to google maps but we might consider switching back.

baedyl · 2022-11-25T15:37:32Z

For anyone coming across this issue, you can try using this react wrapper instead. It's a much better alternative and the markers are displayed correctly.

Andrewdddobusiness · 2024-10-18T21:25:32Z

For anyone coming across this issue, you can try using this react wrapper instead. It's a much better alternative and the markers are displayed correctly.

You da goat for this - bless

olso mentioned this issue Jan 31, 2021

A lot of components don't work. #932

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New version (5.0.0) does not show Features when loading the component for the first time #904

New version (5.0.0) does not show Features when loading the component for the first time #904

kaligrafy commented Oct 27, 2020 •

edited

Loading

JulienMelissas commented Oct 28, 2020

kaligrafy commented Oct 28, 2020

JulienMelissas commented Oct 28, 2020

grillorafael commented Nov 1, 2020

spina-a-d commented Nov 4, 2020

gl03 commented Nov 9, 2020

JulienMelissas commented Nov 9, 2020

Nostin commented Nov 12, 2020

Mahdi-Esbati commented Nov 15, 2020

Mahdi-Esbati commented Nov 16, 2020

conordavidson commented Nov 16, 2020

dispatchr1 commented Dec 19, 2020

JClackett commented Feb 5, 2021

Georift commented Feb 16, 2021

mklopets commented Feb 16, 2021

Georift commented Feb 16, 2021

wallstar commented Feb 20, 2021 •

edited

Loading

SiddharthMantri commented Feb 25, 2021 •

edited

Loading

rustygloves commented Jul 22, 2021

Ahmdrza commented Oct 19, 2022

baedyl commented Nov 23, 2022

cloudlena commented Nov 23, 2022

baedyl commented Nov 23, 2022

baedyl commented Nov 25, 2022 •

edited

Loading

Andrewdddobusiness commented Oct 18, 2024

New version (5.0.0) does not show Features when loading the component for the first time #904

New version (5.0.0) does not show Features when loading the component for the first time #904

Comments

kaligrafy commented Oct 27, 2020 • edited Loading

JulienMelissas commented Oct 28, 2020

kaligrafy commented Oct 28, 2020

JulienMelissas commented Oct 28, 2020

grillorafael commented Nov 1, 2020

spina-a-d commented Nov 4, 2020

gl03 commented Nov 9, 2020

JulienMelissas commented Nov 9, 2020

Nostin commented Nov 12, 2020

Mahdi-Esbati commented Nov 15, 2020

Mahdi-Esbati commented Nov 16, 2020

conordavidson commented Nov 16, 2020

dispatchr1 commented Dec 19, 2020

JClackett commented Feb 5, 2021

Georift commented Feb 16, 2021

mklopets commented Feb 16, 2021

Georift commented Feb 16, 2021

wallstar commented Feb 20, 2021 • edited Loading

SiddharthMantri commented Feb 25, 2021 • edited Loading

rustygloves commented Jul 22, 2021

Ahmdrza commented Oct 19, 2022

baedyl commented Nov 23, 2022

cloudlena commented Nov 23, 2022

baedyl commented Nov 23, 2022

baedyl commented Nov 25, 2022 • edited Loading

Andrewdddobusiness commented Oct 18, 2024

kaligrafy commented Oct 27, 2020 •

edited

Loading

wallstar commented Feb 20, 2021 •

edited

Loading

SiddharthMantri commented Feb 25, 2021 •

edited

Loading

baedyl commented Nov 25, 2022 •

edited

Loading