[Bug] Layer does not get it's source set when it's not a direct child of Source #2547
Description
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