Map not initializing correctly (mapID issue)

[mihaiciradev]

I get this warning:
[useTrackedCameraState] at least one of the values from the map returned undefined. This is not expected to happen. Please report an issue at ....(some lkink)

The map is completely grey and in the console, the above warning is shown.
If i remove the mapId and save the code, the map will work good (but without the ID - obviously).
If i add back the mapId and save the code, the map will work good, with the desired ID.
Though if I don't do this process of delete-readd the ID (and simulate the normal user flow) it will not work. It displays a grey map and if i try to do any JS interaction with the map (built-in doubleclick for zoom for example), it will throw a Script error.

any ideas how to fix it?
I think the problem is that the mapId should get computed only after the map has been fully loaded on the page, but i'm not sure how to address that and if that's the actual problem.

Thanks!

The code is in the picture

[usefulthink]

(some link)

yep, that would be here. Thanks for reporting this! The warning was indeed placed there to figure out under which circumstances the map camera state (center, zoom, heading and tilt) will be undefined, since that's not documented anywhere.

I think the main problem is that the map is missing the center/defaultCenter prop. I suspect adding it will solve all of your problems.

But your other observations are very interesting.

If i remove the mapId and save the code, the map will work good (but without the ID - obviously).
If i add back the mapId and save the code, the map will work good, with the desired ID.
Though if I don't do this process of delete-readd the ID (and simulate the normal user flow) it will not work. It displays a grey map and if i try to do any JS interaction with the map (built-in doubleclick for zoom for example), it will throw a Script error.

To me this sounds a bit like having to do with HMR (are you using create-react-app or something like that?) somehow magically fixing the key issue. I'd like to investigate a bit further where the center-prop is suddenly coming from. When the map starts to work, Is it showing the coordinate origin just south of Ghana?

(and another tiny hint: the mapId, although it looks like one, doesn't have to be considered secret. They can be reused across projects without any consequence for the creator)

[usefulthink]

This will be partly solved with #283

[mihaiciradev]

Thank you for your answer, the problem was indeed the centering.
Yes I am using create-react-app, and when the map magically worked it was initialized somewhere in the middle of the pacific ocean.