feat(components): Return if document is undefined

src/components/Handle/handler.ts

@@ -11,6 +11,7 @@ import {
   SetConnectionId,
   Connection,
 } from '../../types';
+import { getInitialDocument } from '../../utils/document';
 
 type ValidConnectionFunc = (connection: Connection) => boolean;
 export type SetSourceIdFunc = (params: SetConnectionId) => void;
@@ -97,8 +98,12 @@ export function onMouseDown(
   onConnectStart?: OnConnectStartFunc,
   onConnectStop?: OnConnectStopFunc,
   onConnectEnd?: OnConnectEndFunc,
-  document: Document | ShadowRoot = window.document
+  document: Document | ShadowRoot | undefined = getInitialDocument()
 ): void {
+  if(!document) {
+    return;
+  }
+
   const reactFlowNode = (event.target as Element).closest('.react-flow');
   const elementBelow = document.elementFromPoint(event.clientX, event.clientY);
   const elementBelowIsTarget = elementBelow?.classList.contains('target');
@@ -121,7 +126,7 @@ export function onMouseDown(
   setConnectionNodeId({ connectionNodeId: nodeId, connectionHandleId: handleId, connectionHandleType: handleType });
   onConnectStart?.(event, { nodeId, handleId, handleType });
 
-  function onMouseMove(event: MouseEvent) {
+  const onMouseMove = (event: MouseEvent) => {
     setPosition({
       x: event.clientX - containerBounds.left,
       y: event.clientY - containerBounds.top,
@@ -148,9 +153,9 @@ export function onMouseDown(
       elementBelow.classList.add('react-flow__handle-connecting');
       elementBelow.classList.toggle('react-flow__handle-valid', isValid);
     }
-  }
+  };
 
-  function onMouseUp(event: MouseEvent) {
+  const onMouseUp = (event: MouseEvent) => {
     const { connection, isValid } = checkElementBelowIsValid(
       event,
       connectionMode,
@@ -174,7 +179,7 @@ export function onMouseDown(
 
     document.removeEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
     document.removeEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);
-  }
+  };
 
   document.addEventListener('mousemove', onMouseMove as EventListenerOrEventListenerObject);
   document.addEventListener('mouseup', onMouseUp as EventListenerOrEventListenerObject);

src/container/ReactFlow/index.tsx

@@ -35,6 +35,7 @@ import {
 
 import '../../style.css';
 import '../../theme-default.css';
+import { getInitialDocument } from '../../utils/document';
 
 const defaultNodeTypes = {
   input: InputNode,
@@ -190,7 +191,7 @@ const ReactFlow = ({
   edgeUpdaterRadius = 10,
   nodeTypesId = '1',
   edgeTypesId = '1',
-  document = window.document,
+  document = getInitialDocument(),
   ...rest
 }: ReactFlowProps) => {
   const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypesId]);

src/store/index.ts

@@ -1,9 +1,10 @@
 import configureStore from './configure-store';
 
 import { ReactFlowState, ConnectionMode } from '../types';
+import { getInitialDocument } from '../utils/document';
 
 export const initialState: ReactFlowState = {
-  document: window.document,
+  document: getInitialDocument(),
   width: 0,
   height: 0,
   transform: [0, 0, 1],

src/types/index.ts

@@ -431,7 +431,7 @@ export interface ReactFlowState {
   onConnectStop?: OnConnectStopFunc;
   onConnectEnd?: OnConnectEndFunc;
 
-  document: Document | ShadowRoot;
+  document?: Document | ShadowRoot;
 }
 
 export type UpdateNodeInternals = (nodeId: ElementId) => void;

src/utils/document.ts

@@ -0,0 +1 @@
+export const getInitialDocument = () => typeof window === 'undefined' ? undefined : window.document