From 887ffbd0c48e70da5b268e272a048bcf8a1adf66 Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 1 Dec 2020 12:04:13 +0100
Subject: [PATCH] refactor(resizeObserver): check if available

---
 src/components/Nodes/wrapNode.tsx    |  4 ++--
 src/container/NodeRenderer/index.tsx | 24 +++++++++++++-----------
 src/types/index.ts                   |  2 +-
 3 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/Nodes/wrapNode.tsx b/src/components/Nodes/wrapNode.tsx
index 3a3b95f4..539255aa 100644
--- a/src/components/Nodes/wrapNode.tsx
+++ b/src/components/Nodes/wrapNode.tsx
@@ -167,9 +167,9 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     useEffect(() => {
       if (nodeElement.current) {
         const currNode = nodeElement.current;
-        resizeObserver.observe(currNode);
+        resizeObserver?.observe(currNode);
 
-        return () => resizeObserver.unobserve(currNode);
+        return () => resizeObserver?.unobserve(currNode);
       }
 
       return;
diff --git a/src/container/NodeRenderer/index.tsx b/src/container/NodeRenderer/index.tsx
index a835724a..ad31abeb 100644
--- a/src/container/NodeRenderer/index.tsx
+++ b/src/container/NodeRenderer/index.tsx
@@ -38,18 +38,20 @@ const NodeRenderer = (props: NodeRendererProps) => {
     [transform[0], transform[1], transform[2]]
   );
 
-  const resizeObserver = useMemo(
-    () =>
-      new ResizeObserver((entries) => {
-        const updates = entries.map((entry) => ({
-          id: entry.target.getAttribute('data-id') as string,
-          nodeElement: entry.target as HTMLDivElement,
-        }));
+  const resizeObserver = useMemo(() => {
+    if (typeof ResizeObserver === 'undefined') {
+      return null;
+    }
 
-        batchUpdateNodeDimensions({ updates });
-      }),
-    []
-  );
+    return new ResizeObserver((entries) => {
+      const updates = entries.map((entry) => ({
+        id: entry.target.getAttribute('data-id') as string,
+        nodeElement: entry.target as HTMLDivElement,
+      }));
+
+      batchUpdateNodeDimensions({ updates });
+    });
+  }, []);
 
   return (
     <div className="react-flow__nodes" style={transformStyle}>
diff --git a/src/types/index.ts b/src/types/index.ts
index 50e68a15..79d11f61 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -227,7 +227,7 @@ export interface WrapNodeProps {
   snapToGrid?: boolean;
   snapGrid?: SnapGrid;
   isDragging?: boolean;
-  resizeObserver: ResizeObserver;
+  resizeObserver: ResizeObserver | null;
 }
 
 export type FitViewParams = {