Another attempt

Author: aeagle

.npmignore

@@ -0,0 +1,2 @@
+**/components/stories
+**/components/tests

src/components/Space.tsx

@@ -1,18 +1,10 @@
 import { CenterType, ResizeHandlePlacement, AnchorType, Type } from "../core-types";
-import {
-	useSpace,
-	ParentContext,
-	LayerContext,
-	DOMRectContext,
-	IReactSpaceInnerProps,
-	useEffectOnce,
-	SSR_SUPPORT_ENABLED,
-	useUniqueId,
-} from "../core-react";
+import { useSpace, ParentContext, LayerContext, DOMRectContext, IReactSpaceInnerProps, useEffectOnce, SSR_SUPPORT_ENABLED } from "../core-react";
 import * as React from "react";
 import { Centered } from "./Centered";
 import { CenteredVertically } from "./CenteredVertically";
 import { isServer, updateStyleDefinition } from "../core-utils";
+import { useUniqueId } from "src/core-react-interop";
 
 function applyCentering(children: React.ReactNode, centerType: CenterType | undefined) {
 	switch (centerType) {
@@ -41,7 +33,7 @@ const SpaceInner: React.FC<IReactSpaceInnerProps & { wrapperInstance: Space }> =
 	let idToUse = props.id ?? getSpaceUniqueId(props.wrapperInstance);
 	const [initialRender, setInitialRender] = React.useState(SSR_SUPPORT_ENABLED ? true : false);
 
-	const uniqueId = useUniqueId();
+	const uniqueId = useUniqueId(SSR_SUPPORT_ENABLED);
 
 	if (!idToUse) {
 		setSpaceUniqueId(props.wrapperInstance, uniqueId);

src/core-react-interop.ts

@@ -0,0 +1,18 @@
+import { shortuuid } from "./core-utils";
+const React = require("react");
+
+export function useUniqueId(ssrEnabled: boolean) {
+	if (ssrEnabled) {
+		if (React.version.startsWith("18") && typeof React.useId !== "undefined") {
+			return `s${React.useId().replace(/\:/g, "")}`;
+		}
+
+		// @ts-ignore
+		if (typeof React.unstable_useOpaqueIdentifier !== "undefined") {
+			// @ts-ignore
+			return `s${React.unstable_useOpaqueIdentifier().replace(/\:/g, "")}`;
+		}
+	}
+
+	return `s${shortuuid()}`;
+}

src/core-react.ts

@@ -12,10 +12,11 @@ import {
 	OnDragEnd,
 	ResizeTouchEvent,
 } from "./core-types";
-import { coalesce, shortuuid } from "./core-utils";
+import { coalesce } from "./core-utils";
 import { ResizeSensor } from "css-element-queries";
 import * as PropTypes from "prop-types";
 import { useEffect, useRef, useState } from "react";
+import { useUniqueId } from "./core-react-interop";
 
 // WORKAROUND for React18 strict mode
 // https://blog.ag-grid.com/avoiding-react-18-double-mount/
@@ -118,27 +119,13 @@ export function useForceUpdate() {
 	}, []);
 }
 
-export function useUniqueId() {
-	if (SSR_SUPPORT_ENABLED) {
-		if (React.version.startsWith("18") && typeof (React as any)["useId"] !== "undefined") {
-			return `s${(React as any)["useId"]().replace(/\:/g, "")}`;
-		}
-
-		if (typeof (React as any)["unstable_useOpaqueIdentifier"] !== "undefined") {
-			return `s${(React as any)["unstable_useOpaqueIdentifier"]().replace(/\:/g, "")}`;
-		}
-	}
-
-	return `s${shortuuid()}`;
-}
-
 export function useSpace(props: IReactSpaceInnerProps) {
 	const store = currentStore;
 	const update = useForceUpdate();
 	const parent = React.useContext(ParentContext);
 	const layer = React.useContext(LayerContext);
 	const { debug } = React.useContext(OptionsContext);
-	const uniqueId = useUniqueId();
+	const uniqueId = useUniqueId(SSR_SUPPORT_ENABLED);
 	const [spaceId] = React.useState(props.id || uniqueId);
 	const elementRef = React.useRef<HTMLElement>();
 	const resizeSensor = React.useRef<ResizeSensor>();