@mapcomponents/deck-gl 1.8.8 → 1.8.10

package/dist/components/MlHexagonLayer/MlHexagonLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MlHexagonLayer.d.ts","sourceRoot":"","sources":["../../../src/components/MlHexagonLayer/MlHexagonLayer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAI9E,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAwBD,QAAA,MAAM,cAAc,GAAI,OAAO,iBAAiB,4CAgD/C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"MlHexagonLayer.d.ts","sourceRoot":"","sources":["../../../src/components/MlHexagonLayer/MlHexagonLayer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAI9E,MAAM,WAAW,iBAAkB,SAAQ,iBAAiB;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAwBD,QAAA,MAAM,cAAc,GAAI,OAAO,iBAAiB,4CAyC/C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/MlSceneGraphLayer/MlScenegraphLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MlScenegraphLayer.d.ts","sourceRoot":"","sources":["../../../src/components/MlSceneGraphLayer/MlScenegraphLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAK7E,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;IACnE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CA2BvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"MlScenegraphLayer.d.ts","sourceRoot":"","sources":["../../../src/components/MlSceneGraphLayer/MlScenegraphLayer.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,sBAAsB,CAAC;AAK7E,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;IACnE;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,QAAA,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,4CAwBvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),u=require("@mapcomponents/react-maplibre"),m=require("@deck.gl/mapbox"),f=require("@deck.gl/aggregation-layers"),L=require("@deck.gl/geo-layers"),g=require("@deck.gl/mesh-layers"),k="deckgl-layer",y=n.createContext({}),v=({mapId:a,children:s})=>{const r=u.useMap({mapId:a}),e=n.useRef(void 0),[o,t]=n.useState([]),[c,i]=n.useState([]);n.useEffect(()=>{if(r.map)return e.current=new m.MapboxOverlay({id:k,interleaved:!0}),r.map.addControl(e.current),()=>{e.current&&r.map?.removeControl(e.current),e.current=void 0}},[r.map]),n.useEffect(()=>{e.current&&e.current.setProps({layers:[...o],effects:[...c]})},[o,c]);const p={deckGlLayerArray:o,setDeckGlLayerArray:t,deckGlEffectArray:c,setDeckGlEffectArray:i};return l.jsx(y.Provider,{value:p,children:s})};function d(){const a=n.useContext(y);function s(t){a.setDeckGlEffectArray(c=>[...c,t])}function r(t){a.setDeckGlEffectArray(c=>c.filter(i=>i!==t))}function e(t){a.setDeckGlLayerArray(c=>[...c,t])}function o(t){a.setDeckGlLayerArray(c=>c.filter(i=>i!==t))}return{addEffect:s,removeEffect:r,addLayer:e,removeLayer:o}}const x={type:f.HexagonLayer,layerOpacity:.8,elevationRange:[30,75],elevationScale:1,extruded:!0,coverage:.9,autoHighlight:!1,material:{ambient:.6,diffuse:.5,shininess:10},radius:16,transitions:{elevationScale:1500},_filterData:null,colorRange:[[1,152,189,125],[73,227,206,150],[216,254,181,175],[254,237,177,200],[254,173,84,225],[209,55,78,255]]},G=a=>{const s=d();a={...x,...a};const{mapId:r,...e}=a,o=u.useMap({mapId:r,waitForLayer:e.beforeId}),t=n.useMemo(()=>e.data?new f.HexagonLayer({...e}):null,[e.beforeId,e.data,e.elevationScale,e.extruded,e.coverage,e.autoHighlight,e.material,e.radius,e.transitions]);return n.useEffect(()=>{if(!(!o.map||!t))return s.addLayer(t),()=>{s.removeLayer(t)}},[o.map,t]),l.jsx(l.Fragment,{})},D=a=>{const{mapId:s,...r}=a,e=u.useMap({mapId:s}),o=d(),t=n.useMemo(()=>r.data?new L.Tile3DLayer({...r}):null,[r.data,r.id,r.pickable,r.onTileLoad,r.onTileUnload,r.loadOptions,r.loaders,r.visible,r.opacity,r.pointSize,r.beforeId]);return n.useEffect(()=>{if(!(!e.map||!t))return o.addLayer(t),()=>{t&&o.removeLayer(t)}},[e.map,t]),l.jsx(l.Fragment,{})},M=a=>{const{mapId:s,...r}=a,e=u.useMap({mapId:s,waitForLayer:r.beforeId}),o=d(),t=n.useMemo(()=>new g.ScenegraphLayer({...r}),[r]);return n.useEffect(()=>{if(!(!e.map||!t))return o.addLayer(t),()=>{t&&o.removeLayer(t)}},[e.map,t]),l.jsx(l.Fragment,{})};exports.DeckGlContext=y;exports.DeckGlContextProvider=v;exports.Ml3DTileLayer=D;exports.MlHexagonLayer=G;exports.MlSceneGraphLayer=M;exports.useDeckGl=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),i=require("@mapcomponents/react-maplibre"),L=require("@deck.gl/mapbox"),f=require("@deck.gl/aggregation-layers"),g=require("@deck.gl/geo-layers"),k=require("@deck.gl/mesh-layers"),v="deckgl-layer",y=n.createContext({}),x=({mapId:e,children:o})=>{const r=i.useMap({mapId:e}),t=n.useRef(void 0),[s,a]=n.useState([]),[c,u]=n.useState([]);n.useEffect(()=>{if(r.map)return t.current=new L.MapboxOverlay({id:v,interleaved:!0}),r.map.addControl(t.current),()=>{t.current&&r.map?.removeControl(t.current),t.current=void 0}},[r.map]),n.useEffect(()=>{t.current&&t.current.setProps({layers:[...s],effects:[...c]})},[s,c]);const m={deckGlLayerArray:s,setDeckGlLayerArray:a,deckGlEffectArray:c,setDeckGlEffectArray:u};return l.jsx(y.Provider,{value:m,children:o})};function d(){const e=n.useContext(y);function o(a){e.setDeckGlEffectArray(c=>[...c,a])}function r(a){e.setDeckGlEffectArray(c=>c.filter(u=>u!==a))}function t(a){e.setDeckGlLayerArray(c=>[...c,a])}function s(a){e.setDeckGlLayerArray(c=>c.filter(u=>u!==a))}return{addEffect:o,removeEffect:r,addLayer:t,removeLayer:s}}const p={type:f.HexagonLayer,layerOpacity:.8,elevationRange:[30,75],elevationScale:1,extruded:!0,coverage:.9,autoHighlight:!1,material:{ambient:.6,diffuse:.5,shininess:10},radius:16,transitions:{elevationScale:1500},_filterData:null,colorRange:[[1,152,189,125],[73,227,206,150],[216,254,181,175],[254,237,177,200],[254,173,84,225],[209,55,78,255]]},G=e=>{const o=d(),r=i.useMap({mapId:e.mapId,waitForLayer:e.beforeId}),t=n.useMemo(()=>{const{mapId:s,...a}=e;return a.data?new f.HexagonLayer({...p,...a}):null},[e.beforeId,e.data,e.elevationScale,e.extruded,e.coverage,e.autoHighlight,e.material,e.radius,e.transitions]);return n.useEffect(()=>{if(!(!r.map||!t))return o.addLayer(t),()=>{o.removeLayer(t)}},[r.map,t]),l.jsx(l.Fragment,{})},D=e=>{const{mapId:o,...r}=e,t=i.useMap({mapId:o}),s=d(),a=n.useMemo(()=>r.data?new g.Tile3DLayer({...r}):null,[r.data,r.id,r.pickable,r.onTileLoad,r.onTileUnload,r.loadOptions,r.loaders,r.visible,r.opacity,r.pointSize,r.beforeId]);return n.useEffect(()=>{if(!(!t.map||!a))return s.addLayer(a),()=>{a&&s.removeLayer(a)}},[t.map,a]),l.jsx(l.Fragment,{})},M=e=>{const o=i.useMap({mapId:e.mapId,waitForLayer:e.beforeId}),r=d(),t=n.useMemo(()=>{const{mapId:s,...a}=e;return new k.ScenegraphLayer({...a})},[e]);return n.useEffect(()=>{if(!(!o.map||!t))return r.addLayer(t),()=>{t&&r.removeLayer(t)}},[o.map,t]),l.jsx(l.Fragment,{})};exports.DeckGlContext=y;exports.DeckGlContextProvider=x;exports.Ml3DTileLayer=D;exports.MlHexagonLayer=G;exports.MlSceneGraphLayer=M;exports.useDeckGl=d;

package/dist/index.mjs

@@ -1,57 +1,57 @@
-import { jsx as s, Fragment as u } from "react/jsx-runtime";
-import v, { useRef as g, useState as m, useEffect as i, useContext as G, useMemo as f } from "react";
-import { useMap as d } from "@mapcomponents/react-maplibre";
+import { jsx as d, Fragment as s } from "react/jsx-runtime";
+import p, { useRef as g, useState as y, useEffect as i, useContext as G, useMemo as f } from "react";
+import { useMap as u } from "@mapcomponents/react-maplibre";
 import { MapboxOverlay as x } from "@deck.gl/mapbox";
-import { HexagonLayer as p } from "@deck.gl/aggregation-layers";
-import { Tile3DLayer as D } from "@deck.gl/geo-layers";
-import { ScenegraphLayer as H } from "@deck.gl/mesh-layers";
-const h = "deckgl-layer", L = v.createContext({}), w = ({ mapId: a, children: c }) => {
-  const r = d({ mapId: a }), e = g(void 0), [o, t] = m([]), [n, l] = m([]);
+import { HexagonLayer as L } from "@deck.gl/aggregation-layers";
+import { Tile3DLayer as I } from "@deck.gl/geo-layers";
+import { ScenegraphLayer as D } from "@deck.gl/mesh-layers";
+const H = "deckgl-layer", k = p.createContext({}), w = ({ mapId: e, children: n }) => {
+  const r = u({ mapId: e }), t = g(void 0), [c, a] = y([]), [o, l] = y([]);
   i(() => {
     if (r.map)
-      return e.current = new x({
-        id: h,
+      return t.current = new x({
+        id: H,
         interleaved: !0
-      }), r.map.addControl(e.current), () => {
-        e.current && r.map?.removeControl(e.current), e.current = void 0;
+      }), r.map.addControl(t.current), () => {
+        t.current && r.map?.removeControl(t.current), t.current = void 0;
       };
   }, [r.map]), i(() => {
-    e.current && e.current.setProps({
-      layers: [...o],
-      effects: [...n]
+    t.current && t.current.setProps({
+      layers: [...c],
+      effects: [...o]
     });
-  }, [o, n]);
-  const k = {
-    deckGlLayerArray: o,
-    setDeckGlLayerArray: t,
-    deckGlEffectArray: n,
+  }, [c, o]);
+  const v = {
+    deckGlLayerArray: c,
+    setDeckGlLayerArray: a,
+    deckGlEffectArray: o,
     setDeckGlEffectArray: l
   };
-  return /* @__PURE__ */ s(L.Provider, { value: k, children: c });
+  return /* @__PURE__ */ d(k.Provider, { value: v, children: n });
 };
-function y() {
-  const a = G(L);
-  function c(t) {
-    a.setDeckGlEffectArray((n) => [...n, t]);
+function m() {
+  const e = G(k);
+  function n(a) {
+    e.setDeckGlEffectArray((o) => [...o, a]);
   }
-  function r(t) {
-    a.setDeckGlEffectArray((n) => n.filter((l) => l !== t));
+  function r(a) {
+    e.setDeckGlEffectArray((o) => o.filter((l) => l !== a));
   }
-  function e(t) {
-    a.setDeckGlLayerArray((n) => [...n, t]);
+  function t(a) {
+    e.setDeckGlLayerArray((o) => [...o, a]);
   }
-  function o(t) {
-    a.setDeckGlLayerArray((n) => n.filter((l) => l !== t));
+  function c(a) {
+    e.setDeckGlLayerArray((o) => o.filter((l) => l !== a));
   }
   return {
-    addEffect: c,
+    addEffect: n,
     removeEffect: r,
-    addLayer: e,
-    removeLayer: o
+    addLayer: t,
+    removeLayer: c
   };
 }
-const S = {
-  type: p,
+const h = {
+  type: L,
   layerOpacity: 0.8,
   elevationRange: [30, 75],
   elevationScale: 1,
@@ -70,18 +70,17 @@ const S = {
     [254, 173, 84, 225],
     [209, 55, 78, 255]
   ]
-}, R = (a) => {
-  const c = y();
-  a = {
-    ...S,
-    ...a
-  };
-  const { mapId: r, ...e } = a, o = d({
-    mapId: r,
+}, R = (e) => {
+  const n = m(), r = u({
+    mapId: e.mapId,
     waitForLayer: e.beforeId
-  }), t = f(() => e.data ? new p({
-    ...e
-  }) : null, [
+  }), t = f(() => {
+    const { mapId: c, ...a } = e;
+    return a.data ? new L({
+      ...h,
+      ...a
+    }) : null;
+  }, [
     e.beforeId,
     e.data,
     e.elevationScale,
@@ -93,13 +92,13 @@ const S = {
     e.transitions
   ]);
   return i(() => {
-    if (!(!o.map || !t))
-      return c.addLayer(t), () => {
-        c.removeLayer(t);
+    if (!(!r.map || !t))
+      return n.addLayer(t), () => {
+        n.removeLayer(t);
       };
-  }, [o.map, t]), /* @__PURE__ */ s(u, {});
-}, T = (a) => {
-  const { mapId: c, ...r } = a, e = d({ mapId: c }), o = y(), t = f(() => r.data ? new D({
+  }, [r.map, t]), /* @__PURE__ */ d(s, {});
+}, T = (e) => {
+  const { mapId: n, ...r } = e, t = u({ mapId: n }), c = m(), a = f(() => r.data ? new I({
     ...r
   }) : null, [
     r.data,
@@ -115,33 +114,33 @@ const S = {
     r.beforeId
   ]);
   return i(() => {
-    if (!(!e.map || !t))
-      return o.addLayer(t), () => {
-        t && o.removeLayer(t);
+    if (!(!t.map || !a))
+      return c.addLayer(a), () => {
+        a && c.removeLayer(a);
       };
-  }, [e.map, t]), /* @__PURE__ */ s(u, {});
-}, F = (a) => {
-  const { mapId: c, ...r } = a, e = d({
-    mapId: c,
-    waitForLayer: r.beforeId
-  }), o = y(), t = f(
-    () => new H({
-      ...r
-    }),
-    [r]
-  );
+  }, [t.map, a]), /* @__PURE__ */ d(s, {});
+}, F = (e) => {
+  const n = u({
+    mapId: e.mapId,
+    waitForLayer: e.beforeId
+  }), r = m(), t = f(() => {
+    const { mapId: c, ...a } = e;
+    return new D({
+      ...a
+    });
+  }, [e]);
   return i(() => {
-    if (!(!e.map || !t))
-      return o.addLayer(t), () => {
-        t && o.removeLayer(t);
+    if (!(!n.map || !t))
+      return r.addLayer(t), () => {
+        t && r.removeLayer(t);
       };
-  }, [e.map, t]), /* @__PURE__ */ s(u, {});
+  }, [n.map, t]), /* @__PURE__ */ d(s, {});
 };
 export {
-  L as DeckGlContext,
+  k as DeckGlContext,
   w as DeckGlContextProvider,
   T as Ml3DTileLayer,
   R as MlHexagonLayer,
   F as MlSceneGraphLayer,
-  y as useDeckGl
+  m as useDeckGl
 };

package/dist/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mapcomponents/deck-gl",
-	"version": "1.8.8",
+	"version": "1.8.10",
 	"description": "",
 	"main": "src/index.ts",
 	"module": "dist/index.mjs",
@@ -9,9 +9,12 @@
 		"test": "echo \"Error: no test specified\" && exit 1"
 	},
 	"dependencies": {
+		"@emotion/react": "^11.14.0",
+		"@emotion/styled": "^11.14.1",
 		"@mui/icons-material": "^7.3.2",
+		"@mui/system": "^7.3.2",
 		"@mui/material": "^7.3.2",
-		"@storybook/react": "^9.1.4",
+		"@storybook/react": "^9.1.20",
 		"uuid": "^11.1.0"
 	},
 	"peerDependencies": {

package/package.json

@@ -1,14 +1,17 @@
 {
   "name": "@mapcomponents/deck-gl",
-  "version": "1.8.8",
+  "version": "1.8.10",
   "description": "",
   "main": "src/index.ts",
   "module": "dist/index.mjs",
   "license": "MIT",
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.3.2",
+    "@mui/system": "^7.3.2",
     "@mui/material": "^7.3.2",
-    "@storybook/react": "^9.1.4",
+    "@storybook/react": "^9.1.20",
     "uuid": "^11.1.0"
   },
   "peerDependencies": {
@@ -18,7 +21,7 @@
     "@deck.gl/mapbox": "^9.2.6",
     "@deck.gl/mesh-layers": "^9.2.6",
     "maplibre-gl": "^5.16.0",
-    "@mapcomponents/react-maplibre": "1.8.8"
+    "@mapcomponents/react-maplibre": "1.8.10"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.16"

package/src/components/Ml3DTileLayer/Ml3DTileLayer.stories.tsx

@@ -23,7 +23,6 @@ PointCloudExample.parameters = {
 	},
 };
 PointCloudExample.args = {
-	mapId: 'map_1',
 	id: 'PointCould',
 	data: 'assets/tiles/tileset.json',
 	pointSize: 2,
@@ -38,6 +37,5 @@ HamburgExample.parameters = {
 	},
 };
 HamburgExample.args = {
-	mapId: 'map_1',
 	data: 'https://3dtiles.wheregroup.com/tileset.json',
 };

package/src/components/MlHexagonLayer/MlHexagonLayer.stories.tsx

@@ -69,7 +69,6 @@ const Template = (context: any) => {
 export const DefaultSettings: { [key: string]: any } = Template.bind({});
 DefaultSettings.parameters = {};
 DefaultSettings.args = {
-	mapId: 'map_1',
 	type: HexagonLayer,
 	layerOpacity: 0.8,
 	elevationRange: [30, 75],
@@ -93,7 +92,6 @@ DefaultSettings.args = {
 export const CustomColorAndHeightProfile: { [key: string]: any } = Template.bind({});
 CustomColorAndHeightProfile.parameters = {};
 CustomColorAndHeightProfile.args = {
-	mapId: 'map_1',
 	type: HexagonLayer,
 	layerOpacity: 0.8,
 	specularColor: [51, 51, 51],

package/src/components/MlHexagonLayer/MlHexagonLayer.tsx

@@ -40,38 +40,31 @@ const defaultProps = {
 const MlHexagonLayer = (props: MlHexagonMapProps) => {
 	const deckGlHook = useDeckGl();
 
-	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-	// @ts-expect-error
-	props = {
-		...defaultProps,
-		...props,
-	};
-
-	const { mapId, ...HexagonLayerProps } = props;
-
 	const mapHook = useMap({
-		mapId: mapId,
-		waitForLayer: HexagonLayerProps.beforeId,
+		mapId: props.mapId,
+		waitForLayer: props.beforeId,
 	});
 
 	// create deck.gl HexagonLayer once when its props change
 	const hexagonLayer = useMemo(() => {
+		const { mapId: _mapId, ...HexagonLayerProps } = props;
 		if (!HexagonLayerProps.data) return null;
 		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
 		// @ts-ignore
 		return new HexagonLayer({
+			...defaultProps,
 			...HexagonLayerProps,
 		} as unknown as HexagonLayerProps);
 	}, [
-		HexagonLayerProps.beforeId,
-		HexagonLayerProps.data,
-		HexagonLayerProps.elevationScale,
-		HexagonLayerProps.extruded,
-		HexagonLayerProps.coverage,
-		HexagonLayerProps.autoHighlight,
-		HexagonLayerProps.material,
-		HexagonLayerProps.radius,
-		HexagonLayerProps.transitions,
+		props.beforeId,
+		props.data,
+		props.elevationScale,
+		props.extruded,
+		props.coverage,
+		props.autoHighlight,
+		props.material,
+		props.radius,
+		props.transitions,
 	]);
 
 	// add/remove the memoized layer

package/src/components/MlSceneGraphLayer/MlScenegraphLayer.stories.tsx

@@ -78,7 +78,6 @@ DeckglExample.parameters = {
 	},
 };
 DeckglExample.args = {
-	mapId: 'map_1',
 	id: 'ScenegraphLayer',
 	data: 'https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json',
 	getPosition: (d: BartStation) => d.coordinates,
@@ -102,7 +101,6 @@ WhereGroupLocationExample.parameters = {
 	},
 };
 WhereGroupLocationExample.args = {
-	mapId: 'map_1',
 	id: 'ScenegraphLayer',
 	data: wgLocations,
 	getPosition: (d: any) => d.geometry.coordinates,

package/src/components/MlSceneGraphLayer/MlScenegraphLayer.tsx

@@ -16,20 +16,17 @@ export interface MlScenegraphLayerProps extends ScenegraphLayerProps {
 }
 
 const MlScenegraphLayer = (props: MlScenegraphLayerProps) => {
-	const { mapId, ...ScenegraphLayerProps } = props;
-
 	const mapHook = useMap({
-		mapId: mapId,
-		waitForLayer: ScenegraphLayerProps.beforeId,
+		mapId: props.mapId,
+		waitForLayer: props.beforeId,
 	});
 	const deckGlHook = useDeckGl();
-	const scenegraphLayer = useMemo(
-		() =>
-			new ScenegraphLayer({
-				...ScenegraphLayerProps,
-			}),
-		[ScenegraphLayerProps]
-	);
+	const scenegraphLayer = useMemo(() => {
+		const { mapId: _mapId, ...ScenegraphLayerProps } = props;
+		return new ScenegraphLayer({
+			...ScenegraphLayerProps,
+		});
+	}, [props]);
 
 	useEffect(() => {
 		if (!mapHook.map || !scenegraphLayer) return;

package/vite.config.ts

@@ -9,6 +9,16 @@ import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
 export default defineConfig(() => ({
 	root: __dirname,
 	cacheDir: '../../node_modules/.vite/packages/deck-gl',
+	resolve: {
+		dedupe: [
+			'react',
+			'react-dom',
+			'@mui/material',
+			'@mui/system',
+			'@emotion/react',
+			'@emotion/styled',
+		],
+	},
 	plugins: [
 		react(),
 		nxViteTsPaths(),
@@ -50,6 +60,11 @@ export default defineConfig(() => ({
 				'@deck.gl/geo-layers',
 				'@deck.gl/mapbox',
 				'@deck.gl/mesh-layers',
+				'@mui/material',
+				'@mui/system',
+				'@mui/icons-material',
+				'@emotion/react',
+				'@emotion/styled',
 			],
 		},
 	},