fix

package.json

@@ -40,7 +40,8 @@
   },
   "peerDependencies": {
     "cesium": "1.x",
-    "react": ">=18.2.0"
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "8.0.5",
@@ -75,4 +76,4 @@
     "vitest": "1.4.0",
     "web-streams-polyfill": "4.0.0"
   }
-}
+}

src/Entity/Entity.ts

@@ -1,7 +1,14 @@
 import { Entity as CesiumEntity } from "cesium";
 import { ReactNode } from "react";
 
-import { createCesiumComponent, EventProps, PickCesiumProps, Merge, EventTarget } from "../core";
+import {
+  createCesiumComponent,
+  EventProps,
+  PickCesiumProps,
+  Merge,
+  EventTarget,
+  RootComponentInternalProps,
+} from "../core";
 
 export type { EventTarget } from "../core";
 
@@ -75,13 +82,14 @@ export type EntityCesiumEvents = {
   onDefinitionChange?: () => void;
 };
 
-export type EntityOtherProps = EventProps<EventTarget> & {
-  children?: ReactNode;
-  /** If true, the entity will be selected. It works only inside Viewer not CesiumWidget. */
-  selected?: boolean;
-  /** If true, the entity will be tracked by the camera. It works only inside Viewer not CesiumWidget. */
-  tracked?: boolean;
-};
+export type EntityOtherProps = RootComponentInternalProps &
+  EventProps<EventTarget> & {
+    children?: ReactNode;
+    /** If true, the entity will be selected. It works only inside Viewer not CesiumWidget. */
+    selected?: boolean;
+    /** If true, the entity will be tracked by the camera. It works only inside Viewer not CesiumWidget. */
+    tracked?: boolean;
+  };
 
 export type EntityProps = EntityCesiumProps &
   EntityCesiumReadonlyProps &
@@ -164,9 +172,12 @@ const Entity = createCesiumComponent<CesiumEntity, EntityProps>({
       }
     }
   },
-  provide(element) {
+  provide(element, _ctx, props) {
     return {
       entity: element,
+      __$internal: {
+        onUpdate: props?.onUpdate,
+      },
     };
   },
   cesiumProps,

src/ImageryLayer/ImageryLayer.ts

@@ -99,6 +99,8 @@ const ImageryLayer = createCesiumComponent<CesiumImageryLayer, ImageryLayerProps
       result = maybePromise as ImageryProvider;
     }
 
+    if (!result) return;
+
     const element = new CesiumImageryLayer(result, props);
     context.imageryLayerCollection.add(element, props.index);
     return element;

src/core/hooks.ts

@@ -82,6 +82,7 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
   const wrapperRef = useRef<HTMLDivElement>(null);
   const stateRef = useRef<State>();
   const eventManager = ctx?.[eventManagerContextKey];
+  const mountReadyRef = useRef<Promise<void>>();
 
   // Update properties
   const updateProperties = useCallback(
@@ -157,8 +158,8 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
           );
         }
 
-        unmount();
-        mount();
+        await unmount();
+        mountReadyRef.current = mount();
       }
     },
     [], // eslint-disable-line react-hooks/exhaustive-deps
@@ -224,7 +225,12 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
     setMounted(true);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-  const unmount = useCallback(() => {
+  const unmount = useCallback(async () => {
+    // Wait mount before unmount
+    if (mountReadyRef.current) {
+      await mountReadyRef.current;
+    }
+
     // Destroy cesium element
     if (element.current && destroy) {
       destroy(element.current, ctx, wrapperRef.current, stateRef.current);
@@ -257,24 +263,29 @@ export const useCesiumComponent = <Element, Props extends RootComponentInternalP
 
   // To prevent re-execution by hot loader, execute only once
   useLayoutEffect(() => {
-    mount();
-    return () => unmount();
+    mountReadyRef.current = mount();
+    return () => {
+      unmount();
+    };
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Update properties of cesium element
   useEffect(() => {
-    const propsWC = propsWithChildren(props);
-    if (mounted) {
-      if (!shallowEquals(propsWC, prevProps.current)) {
-        updateProperties(propsWC);
-        ctx.__$internal?.onUpdate?.();
+    const update = async () => {
+      const propsWC = propsWithChildren(props);
+      if (mounted) {
+        if (!shallowEquals(propsWC, prevProps.current)) {
+          await updateProperties(propsWC);
+          ctx.__$internal?.onUpdate?.();
+        }
+      } else {
+        // first time
+        prevProps.current = propsWC;
+        initialProps.current = propsWC;
+        mountedRef.current = true;
       }
-    } else {
-      // first time
-      prevProps.current = propsWC;
-      initialProps.current = propsWC;
-      mountedRef.current = true;
-    }
+    };
+    update();
   }, [ctx.__$internal, mounted, props, updateProperties]);
 
   // Expose cesium element