! SSR when using useCrossTabs

CHANGELOG.md

@@ -6,6 +6,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ## [UNRELEASED]
 (nothing yet)
 
+## [1.2.2] - 2023-09-11
+### Fixed
+- SSR when using `useCrossTabs`
+
 ## [1.2.1] - 2023-08-26
 ### Fixed
 - missing exports of hooks from 1.2.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ezez/hooks",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "repository": "[email protected]:dzek69/ezez-hooks.git",
   "author": "Jacek Nowacki",
   "license": "MIT",

src/demos/useCrossTabs/index.tsx

@@ -11,6 +11,9 @@ const UseCrossTabs: React.FC<Props> = () => {
     const [messages, setMessages] = React.useState<string[]>([]);
 
     const handleSubmit: React.FormEventHandler = useCallback((e) => {
+        if (!ct) {
+            return;
+        }
         e.preventDefault();
         ct.postMessage(text);
         setText("");
@@ -21,6 +24,10 @@ const UseCrossTabs: React.FC<Props> = () => {
     }, []);
 
     useEffect(() => {
+        if (!ct) {
+            return;
+        }
+
         const listener = (e: MessageEvent) => {
             setMessages((prev) => [...prev, JSON.stringify(e.data)]);
         };

src/demos/useCrossTabsMessage/index.tsx

@@ -40,6 +40,10 @@ const UseCrossTabsMessage: React.FC<Props> = () => {
     }, [callback])); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
+        if (!ct) {
+            return;
+        }
+
         const interval = setInterval(() => {
             const msg = pickRandomElement();
             ct.postMessage(msg);

src/useCrossTabs.ts

@@ -50,7 +50,7 @@ const removeInstance = (nname: string) => {
  */
 const useCrossTabs = (name: string) => { // eslint-disable-line @typescript-eslint/no-shadow
     const bcRef = useRef<BroadcastChannel>();
-    if (bcRef.current === undefined) {
+    if (bcRef.current === undefined && typeof BroadcastChannel !== "undefined") {
         bcRef.current = createInstance(name);
     }
     const update = useForceUpdate();

src/useCrossTabsMessage.ts

@@ -16,13 +16,13 @@ const useCrossTabsMessage = <T = any>(name: string, callback: (data: MessageEven
     // @TODO this can be replaced with useEffect2
     useEffect(() => {
         if (prevBc.current !== bc) {
-            prevBc.current.removeEventListener("message", prevCallback.current);
-            bc.addEventListener("message", callback);
+            prevBc.current?.removeEventListener("message", prevCallback.current);
+            bc?.addEventListener("message", callback);
             return;
         }
 
-        bc.removeEventListener("message", prevCallback.current);
-        bc.addEventListener("message", callback);
+        bc?.removeEventListener("message", prevCallback.current);
+        bc?.addEventListener("message", callback);
     }, [bc, callback]);
 
     // keep this hook last

src/useDetectMultiTabs.ts

@@ -33,6 +33,10 @@ const useDetectMultiTabs = (name = "@ezez/hooks/useDetectMultiTabs") => { // esl
     }, []);
 
     useEffect(() => {
+        if (!bc) {
+            return;
+        }
+
         const interval = new Interval(() => {
             bc.postMessage("ping");
         }, SEND_PING_EVERY, true, true);
@@ -43,6 +47,10 @@ const useDetectMultiTabs = (name = "@ezez/hooks/useDetectMultiTabs") => { // esl
     }, [bc]);
 
     useEffect(() => {
+        if (!bc) {
+            return;
+        }
+
         const callback = (e: MessageEvent) => {
             if (e.data === "ping") {
                 setIsMultiTab(true);