Uncaught TypeError: Cannot read properties of null (reading 'bottom') in the <Popup> component

[cedricdelpoux]

mapbox-gl-js version: 2.8.2

browser: Brave Version 1.39.111 Chromium: 102.0.5005.61 (Build officiel) (arm64)2.8.2

Steps to Trigger Behavior

1. Open a popup

Link to Demonstration

mapbox-gl.bug.mov

Expected Behavior

The popup open

Actual Behavior

react_devtools_backend.js:4026 TypeError: Cannot read properties of null (reading 'bottom')
    at so (mapbox-gl.js:32604:118)
    at Popup._update (mapbox-gl.js:34023:23)
    at Popup.addTo (mapbox-gl.js:33900:214)
    at o.value (react-map-gl.esm.js:827:78)
    at gi (react-dom.production.min.js:259:217)
    at mi (react-dom.production.min.js:258:446)
    at hi (react-dom.production.min.js:257:421)
    at react-dom.production.min.js:282:96
    at bs (react-dom.production.min.js:280:398)
    at us (react-dom.production.min.js:272:439)

The above error occurred in the <Popup> component:

    at n (webpack-internal:///./node_modules/@urbica/react-map-gl/dist/react-map-gl.esm.js:24:18672)
    at ActivitiesPopup (webpack-internal:///./src/templates/sport-map.js:370:5)

[stepankuzmin]

Hi @cedricdelpoux,

Thank you for your opening this ticket. To help the maintainers and community understand and address the problem accurately, please provide a minimal, complete, verifiable demonstration of the issue. We recommend using https://jsbin.com/. Please include information about the browser version and operating system used.

[nopanikx]

same problem
mapbox-gl-js version: 2.9.1

error :
`Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'bottom')

Call Stack
hn
node_modules\mapbox-gl\dist\mapbox-gl.js (35:445410)`

[azuken]

I found issue origin :

In Popup.js file, function normalizeOffset, for some reason offset parameter is null (even with default value new Point(0, 0), so the last return with return Point.convert(offset[anchor] || [0, 0]);` fails (with anchor equals 'bottom' here).

A workaround is to set offset prop to Popup component to [0, 0, 0, 0].

Here is a working example :

 <Popup
        latitude={parseFloat(coordinates[0])}
        longitude={parseFloat(coordinates[1])}
        closeButton={false}
        anchor={anchor}
        offset={[0, 0, 0, 0]}>
    <>...</>
</Popup>

I am using it with https://github.com/urbica/react-map-gl library, so offset default value may be different in some cases.

[stepankuzmin]

I see, thanks for the help! It looks like this is an issue with the @urbica/react-map-gl package.

[stepankuzmin]

This issue should be fixed now with the latest @urbica/react-map-gl release v1.16.2.
Feel free to open the issue in the https://github.com/urbica/react-map-gl repo if you have any questions.

[musterknabe]

I stumbled into the same issue, when updating from Mapbox v1 to v3, while using vanilla mapboxgl.Popup();

There seem to be a regression. When passing options.offset = null the following line throws:

mapbox-gl-js/src/ui/popup.ts

Line 723 in 87938fb

return Point.convert(offset[anchor] || [0, 0]);

I would expect the Popup to accept null as offset option and use default offset in this case, like it used to.

[musterknabe]

I just realized I already opened a new issue with PR for this: #13457