react-map-gl icon indicating copy to clipboard operation
react-map-gl copied to clipboard

[Bug] `Layer` does not get it's source set when it's not a direct child of `Source`

Open devanshj opened this issue 5 months ago • 0 comments

Description

These two snippets should have the same behavior...

const App = () =>
  <Map {...}>
    <Source {...}>
      <Layer {...}/>
    </Source>
  </Map>
const App = () =>
  <Map {...}>
    <Source {...}>
      <MyLayer/>
    </Source>
  </Map>

const MyLayer = () =>
  <Layer {...}/>

But currently they do not have the same behavior as in the latter case the layer's source does not get set to the id of the parent source and hence the following error gets thrown...

Error: layers.my-layer: missing required property "source"
    at Object.as [as y] (maplibre-gl.js:42:143228)
    at xi (maplibre-gl.js:46:270533)
    at wi._validate (maplibre-gl.js:46:294579)
    at wi.addLayer (maplibre-gl.js:46:284511)
    at e.Map.addLayer (maplibre-gl.js:46:508918)
    at createLayer (layer.js:62:9)
    at Layer (layer.js:93:5)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at performConcurrentWorkOnRoot (react-dom.development.js:25738:74)
    at workLoop (scheduler.development.js:266:34)
    at flushWork (scheduler.development.js:239:14)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:533:21) Error Component Stack
    at Layer (layer.js:67:42)
    at MyLayer (<anonymous>)
    at Source (source.js:81:34)
    at div (<anonymous>)
    at div (<anonymous>)
    at _Map (map.js:24:49)
    at App (<anonymous>)

Expected Behavior

Both snippets should have the same behavior, i.e. they render without any errors

Steps to Reproduce

See this codesandbox: https://codesandbox.io/p/sandbox/4f6xyt

Environment

Framework version: @vis.gl/[email protected]

Logs

See the log mentioned above

devanshj avatar Jul 25 '25 08:07 devanshj