[Bug] Arcgis DeckRenderer Vertex shader is not compiled

[charunik]

Description

I am trying to integrate deck.gl with ArcGIS in my React application by following the example provided in the deck.gl documentation (https://deck.gl/docs/api-reference/arcgis/deck-renderer). However, I am encountering an error when the layer is being rendered.

Uncaught (in promise) Error: Error during linking: Vertex shader is not compiled.

at WEBGLRenderPipeline._reportLinkStatus (@deck__gl_arcgis.js?v=271bc730:4903:15)
at WEBGLRenderPipeline._linkShaders (@deck__gl_arcgis.js?v=271bc730:4879:12)
at new WEBGLRenderPipeline (@deck__gl_arcgis.js?v=271bc730:4733:10)
at _WebGLDevice.createRenderPipeline (@deck__gl_arcgis.js?v=271bc730:6086:12)
at _PipelineFactory.createRenderPipeline (chunk-66KWV6NY.js?v=271bc730:24291:36)
at _Model._updatePipeline (chunk-66KWV6NY.js?v=271bc730:24916:44)
at new _Model (chunk-66KWV6NY.js?v=271bc730:24560:26)
at _ScatterplotLayer._getModel (chunk-H3ARGZG2.js?v=271bc730:2306:12)
at _ScatterplotLayer.updateState (chunk-H3ARGZG2.js?v=271bc730:2280:31)
at _ScatterplotLayer._update (chunk-66KWV6NY.js?v=271bc730:40454:14)

Any help in resolving this issue would be greatly appreciated.

Flavors

• [ ] Script tag
• [X] React
• [ ] Python/Jupyter notebook
• [ ] MapboxOverlay
• [ ] GoogleMapsOverlay
• [ ] CartoLayer
• [X] ArcGIS

Expected Behavior

Layer should be rendered properly on the map

Steps to Reproduce

Here is the code snippet from my React component:

import * as React from 'react';
import { Box } from '@mui/material';
import { DeckRenderer } from '@deck.gl/arcgis';
import { ScatterplotLayer } from '@deck.gl/layers';
import ArcGISMap from '@arcgis/core/Map';
import SceneView from '@arcgis/core/views/SceneView';
import * as externalRenderers from '@arcgis/core/views/3d/externalRenderers';
import { useEffect } from 'react';

function MyBaseMap() {
  const mapRef = React.useRef<any>(null);

  useEffect(() => {
    const sceneView = new SceneView({
      container: mapRef.current,
      map: new ArcGISMap({
        basemap: 'dark-gray-vector'
      }),
      camera: {
        position: { x: -74, y: 40.65, z: 5000 },
        heading: 180,
        tilt: 30
      },
      viewingMode: 'global'
    });

    const renderer = new DeckRenderer(sceneView, {
      layers: [
        new ScatterplotLayer({
          data: [{ position: [0.119, 52.205] }],
          getPosition: (d) => d.position,
          getColor: [255, 0, 0],
          radiusMinPixels: 20
        })
      ]
    });

    externalRenderers.add(sceneView, renderer);
  }, []);

  return <Box component="div" ref={mapRef} sx={{ height: '100%', width: '100%' }}></Box>;
}

export default React.memo(MyBaseMap);

Environment

• Framework version:[email protected]
• Browser: Chrome 125.0.6422.142
• OS: Windows 11 Enterprise

Logs