[Bug] Uncaught ReferenceError: _define_property is not defined

[matburnham]

Description

Bit of an odd one that I can't quite figure out. react-map-gl has a peer dependency on maplibre-gl. If I end up with a upgrade of maplibre-gl from 5.11.0 to 5.12.0 (or 5.13.0) I get an error in the browser console, and the map doesn't render:

Browser console:

dbf3e5f8-162b-4b7e-8…-d8d408c9388f:17308 Uncaught ReferenceError: _define_property is not defined
    at dbf3e5f8-162b-4b7e-8…8d408c9388f:17308:9
    at dbf3e5f8-162b-4b7e-8…8d408c9388f:19735:7

Not working with maplibre-gl 5.12.0

mat@devbox:~/dev/sandbox$ pnpm add maplibre-gl@5.12.0
Already up to date
Progress: resolved 299, reused 228, downloaded 0, added 0, done
Done in 1.9s using pnpm v10.23.0

mat@devbox:~/dev/sandbox$ pnpm why maplibre-gl
Legend: production dependency, optional only, dev only

airfieldmap@0.1.0 /home/mat/dev/sandbox (PRIVATE)

dependencies:
maplibre-gl 5.12.0
react-map-gl 8.1.0
├─┬ @vis.gl/react-maplibre 8.1.0
│ └── maplibre-gl 5.12.0 peer
└── maplibre-gl 5.12.0 peer

Working okay with maplibre-gl 5.11.0

mat@devbox:~/dev/sandbox$ pnpm add maplibre-gl@5.11.0
Packages: +3 -4
+++----
Progress: resolved 298, reused 227, downloaded 0, added 0, done

dependencies:
- maplibre-gl 5.12.0
+ maplibre-gl 5.11.0 (5.13.0 is available)

Done in 3s using pnpm v10.23.0

mat@devbox:~/dev/sandbox$ pnpm why maplibre-gl
Legend: production dependency, optional only, dev only

airfieldmap@0.1.0 /home/mat/dev/sandbox (PRIVATE)

dependencies:
react-map-gl 8.1.0
├─┬ @vis.gl/react-maplibre 8.1.0
│ └── maplibre-gl 5.11.0 peer
└── maplibre-gl 5.11.0 peer

I guess it's a maplibre-gl problem, but I'm using it from react-map-gl and getting confused. Am I doing anything stupid in the attached sandbox?

Expected Behaviour

Works the same between maplibre-gl@5.11.0 and maplibre-gl@5.12.0 (or 5.13.0)

Steps to Reproduce

sandbox.zip

Environment

Framework version: react-map-gl@8.1.0
Map library: maplibre-gl@5.12.0
Browser: Chrome 142.0.7444.176
OS: Windows 11 25H2 26200.7171

Logs

No response

[matburnham]

It looks like maplibre/maplibre-gl-js#6771 and maplibre/maplibre-gl-js#6680 relate.

[CaarLo1337]

I ran into the exact same issue with Next.js 16 using Turbopack. From what I can tell, this is currently a general incompatibility where Turbopack removes the internally referenced define_property helper, which causes MapLibre to fail when using a Web Worker.

This is the setup that works for me:

I copied both maplibre-gl-csp-worker.js and maplibre-gl-csp-worker.js.map from the node_modules/maplibre-gl/dist directory into my app’s public folder. Then I configured MapLibre to use this worker via workerUrl.

<Map
  ref={mapRef}
  initialViewState={initialViewState}
  mapStyle={mapStyle}
  maxBounds={bounds}
  maxZoom={MAP_CONFIG.MAX_ZOOM}
  doubleClickZoom={false}
  dragRotate={false}
  touchPitch={false}
  onClick={handleMapClick}
  onLoad={() => mapRef.current?.getMap().resize()}
  workerUrl="/maplibre-gl-csp-worker.js"
/>

With this approach, the worker loads correctly and the error no longer occurs.

[matburnham]

I found this was fixed with maplibre-gl-js >5.14 as a peer dependency, see maplibre/maplibre-gl-js#6680 (comment). I'm not sure if the mapbox-gl equivalent is also problematic/fixed.

package.json only references mapbox-gl, not maplibre-gl:

    "mapbox-gl-v1": "npm:mapbox-gl@1.13.0",
    "mapbox-gl-v3": "npm:mapbox-gl@3.9.0",

So as maplibre/maplibre-gl-js#6680 and maplibre/maplibre-gl-js#6771 are both closed maybe this should be too.