try fix for dynamic map error

neerajnerlekar · Feb 18, 2024 · d0799ba · d0799ba
1 parent 6a4d7b2
commit d0799ba
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 61 deletions.
diff --git a/packages/nextjs/app/location/page.tsx b/packages/nextjs/app/location/page.tsx
@@ -6,11 +6,11 @@ import Image from "next/image";
 import { NFTStorage } from "nft.storage";
 import { useEffect, useState } from "react";
 import { FormProvider, useForm } from "react-hook-form";
-import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 import NestedLayoutForWallet from "~~/components/NestedLayoutForWallet";
+import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 
-const DynamicMap = dynamic(() => import("../../components/Map"), {
-  loading: () => <p>Loading...</p>,
+const DynamicMap = dynamic(() => import("~~/components/Map"), {
+  ssr: false,
 });
 
 export default function Home() {
@@ -80,73 +80,71 @@ export default function Home() {
     });
   }, []);
 
-
-
   return (
     <NestedLayoutForWallet>
-    <div className="container mx-auto px-4 py-8">
-      <FormProvider {...methods}>
-        <form
-          onSubmit={methods.handleSubmit(onSubmit)}
-          className="max-w-lg mx-auto bg-white shadow-md rounded-lg px-8 pt-6 pb-8 mb-4">
-          <div className="mb-4">
-            <TextInput name="name" label="Name" type="text" />
-            <TextInput name="place" label="Type of Place" type="text" />
-            {location?.coords?.latitude !== 0 && (
-              <DynamicMap
-                position={[
-                  location?.coords?.latitude,
-                  location?.coords?.longitude,
-                ]}
-              />
-            )}
-            <br />
+      <div className="container mx-auto px-4 py-8">
+        <FormProvider {...methods}>
+          <form
+            onSubmit={methods.handleSubmit(onSubmit)}
+            className="max-w-lg mx-auto bg-white shadow-md rounded-lg px-8 pt-6 pb-8 mb-4">
             <div className="mb-4">
-              <label className="block text-gray-700 text-sm font-bold mb-2">
-                PlaceImage
-              </label>
-              <input
-                type="file"
-                accept="image/*"
-                onChange={handleImageChange}
-                className="block w-full text-sm text-gray-500
+              <TextInput name="name" label="Name" type="text" />
+              <TextInput name="place" label="Type of Place" type="text" />
+              {location?.coords?.latitude !== 0 && (
+                <DynamicMap
+                  position={[
+                    location?.coords?.latitude,
+                    location?.coords?.longitude,
+                  ]}
+                />
+              )}
+              <br />
+              <div className="mb-4">
+                <label className="block text-gray-700 text-sm font-bold mb-2">
+                  PlaceImage
+                </label>
+                <input
+                  type="file"
+                  accept="image/*"
+                  onChange={handleImageChange}
+                  className="block w-full text-sm text-gray-500
             file:mr-4 file:py-2 file:px-4
             file:rounded-full file:border-0
             file:text-sm file:font-semibold
             file:bg-blue-50 file:text-blue-700
             hover:file:bg-blue-100
           "
-              />
-            </div>
-            {/* Image Preview */}
-            {selectedImage && selectedImage.previewURL && (
-              <div className="mb-4">
-                <p className="block text-gray-700 text-sm font-bold mb-2">
-                  Preview
-                </p>
-                <Image
-                  src={selectedImage.previewURL}
-                  alt="Preview"
-                  className="max-w-xs max-h-64"
                 />
               </div>
-            )}
-          </div>
-          <div className="flex justify-center">
-            <button
-              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
-              type="submit"
-              disabled={isLoading}>
-              {isLoading ? (
-                <span className="loading loading-spinner loading-sm"></span>
-              ) : (
-                <>Generate Proof</>
+              {/* Image Preview */}
+              {selectedImage && selectedImage.previewURL && (
+                <div className="mb-4">
+                  <p className="block text-gray-700 text-sm font-bold mb-2">
+                    Preview
+                  </p>
+                  <Image
+                    src={selectedImage.previewURL}
+                    alt="Preview"
+                    className="max-w-xs max-h-64"
+                  />
+                </div>
               )}
-            </button>
-          </div>
-        </form>
-      </FormProvider>
-    </div>
+            </div>
+            <div className="flex justify-center">
+              <button
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+                type="submit"
+                disabled={isLoading}>
+                {isLoading ? (
+                  <span className="loading loading-spinner loading-sm"></span>
+                ) : (
+                  <>Generate Proof</>
+                )}
+              </button>
+            </div>
+          </form>
+        </FormProvider>
+      </div>
     </NestedLayoutForWallet>
   );
 }
diff --git a/packages/nextjs/app/wallet/page.tsx b/packages/nextjs/app/wallet/page.tsx
@@ -1,13 +1,17 @@
 "use client";
 
-import DynamicMap from "../../components/Map";
 import type { NextPage } from "next";
+import dynamic from "next/dynamic";
 import Image from "next/image";
 import React, { useEffect, useState } from "react";
 import { useAccount } from "wagmi";
 import NestedLayoutForWallet from "~~/components/NestedLayoutForWallet";
 import { useScaffoldContractRead } from "~~/hooks/scaffold-eth";
 
+const DynamicMap = dynamic(() => import("~~/components/Map"), {
+  ssr: false,
+});
+
 const Home: NextPage = () => {
   const { address, isConnected } = useAccount();
   const { data: playerData } = useScaffoldContractRead({
@@ -16,8 +20,6 @@ const Home: NextPage = () => {
     args: [address],
   });
 
-
-
   return (
     <NestedLayoutForWallet>
       <div className="flex items-center flex-col flex-grow pt-10">