fix: hydration error

worldcoin · May 30, 2024 · 0a83af5 · 0a83af5
1 parent cf25a5a
commit 0a83af5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 17 deletions.
diff --git a/demo/with-next/components/ClientContent/Versions.tsx b/demo/with-next/components/ClientContent/Versions.tsx
@@ -5,21 +5,8 @@ import {
   MiniKitInstallErrorCode,
   MiniKitInstallErrorMessage,
 } from "@worldcoin/minikit-js";
-import { useEffect } from "react";
 
 export const Versions = () => {
-  useEffect(() => {
-    if (
-      typeof window === "undefined" ||
-      typeof window.WorldApp === "undefined"
-    ) {
-      return;
-    }
-
-    // @ts-ignore
-    console.log(MiniKit.commandsValid(window.WorldApp?.supported_commands));
-  }, []);
-
   const isValid = () => {
     if (
       typeof window === "undefined" ||
@@ -55,8 +42,11 @@ export const Versions = () => {
         <p>window.WorldApp:</p>
 
         <div className="bg-gray-300 min-h-[100px] p-2">
-          <pre className="break-all whitespace-break-spaces">
-            {JSON.stringify(window.WorldApp ?? null, null, 2)}
+          <pre
+            suppressHydrationWarning
+            className="break-all whitespace-break-spaces"
+          >
+            {JSON.stringify(window?.WorldApp ?? null, null, 2)}
           </pre>
         </div>
       </div>

diff --git a/demo/with-next/components/ClientContent/index.tsx b/demo/with-next/components/ClientContent/index.tsx
@@ -6,7 +6,12 @@ import { User } from "./User";
 import { Nav } from "./Nav";
 import { WalletAuth } from "./WalletAuth";
 import { ExternalLinks } from "./ExternalLinks";
-import { Versions } from "./Versions";
+import dynamic from "next/dynamic";
+
+const VersionsNoSSR = dynamic(
+  () => import("./Versions").then((comp) => comp.Versions),
+  { ssr: false }
+);
 
 export const ClientContent = () => {
   return (
@@ -19,7 +24,7 @@ export const ClientContent = () => {
         <hr />
 
         <div className="grid gap-y-8">
-          <Versions />
+          <VersionsNoSSR />
           <hr />
           <VerifyAction />
           <hr />