fix(frontend): eliminate hydration errors

interestingly enough, lazily loading animatepresence/lazymotion will lead to hydration errors
Tech-FraserSAC · Jun 10, 2024 · 66c2368 · 66c2368
1 parent b69c1f0
commit 66c2368
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 87 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -28,8 +28,8 @@
         "eslint-config-next": "13.4.12",
         "firebase": "^10.1.0",
         "fns": "^1.0.0",
-        "framer-motion": "^10.16.1",
-        "next": "^14.0.0",
+        "framer-motion": "^10.18.0",
+        "next": "^14.2.3",
         "nextjs-google-analytics": "^2.3.3",
         "postcss": "8.4.27",
         "react": "18.2.0",

diff --git a/frontend/pages/_app.tsx b/frontend/pages/_app.tsx
@@ -5,14 +5,13 @@ import { Poppins } from "next/font/google";
 import { QueryClient } from "react-query";
 
 import "@/styles/globals.css";
+import { AnimatePresence, LazyMotion } from "framer-motion";
 
 const FirebaseAuthProvider = dynamic(() =>
     import("@/components/FirebaseAuthContext").then((mod) => mod.FirebaseAuthProvider),
 );
 const QueryClientProvider = dynamic(() => import("react-query").then((mod) => mod.QueryClientProvider));
 const ThemeProvider = dynamic(() => import("@material-tailwind/react").then((mod) => mod.ThemeProvider));
-const AnimatePresence = dynamic(() => import("framer-motion").then((mod) => mod.AnimatePresence));
-const LazyMotion = dynamic(() => import("framer-motion").then((mod) => mod.LazyMotion));
 const GoogleAnalytics = dynamic(() => import("nextjs-google-analytics").then((mod) => mod.GoogleAnalytics));
 const GoogleOAuthProvider = dynamic(() => import("@react-oauth/google").then((mod) => mod.GoogleOAuthProvider));
 
@@ -33,15 +32,10 @@ export default function App({ Component, pageProps }: AppProps) {
                 <QueryClientProvider client={queryClient}>
                     <GoogleOAuthProvider clientId={process.env.NEXT_PUBLIC_GCLOUD_CLIENT_ID ?? ""}>
                         <FirebaseAuthProvider>
-                            <LazyMotion
-                                features={domMax}
-                                strict
-                            >
+                            <LazyMotion features={domMax} strict>
                                 <AnimatePresence mode="wait">
-                                    <>
-                                        <GoogleAnalytics trackPageViews />
-                                        <Component {...pageProps} />
-                                    </>
+                                    <GoogleAnalytics trackPageViews />
+                                    <Component {...pageProps} />
                                 </AnimatePresence>
                             </LazyMotion>
                         </FirebaseAuthProvider>