From e9bc3592a11551c5589c05ce942930733368953e Mon Sep 17 00:00:00 2001 From: RonakSurana-2001 Date: Sat, 5 Oct 2024 10:02:54 +0530 Subject: [PATCH] Solved Hydration Issue --- app/layout.tsx | 2 +- app/providers.tsx | 9 +++++++-- lib/server-functions.ts | 9 ++++++--- package.json | 2 +- 4 files changed, 15 insertions(+), 7 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index f7bd3fb..4fffa25 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -30,8 +30,8 @@ export default function RootLayout({ }) { return ( - + diff --git a/app/providers.tsx b/app/providers.tsx index 77c11b6..f25877e 100644 --- a/app/providers.tsx +++ b/app/providers.tsx @@ -1,7 +1,7 @@ "use client"; import { ChakraProvider } from "@chakra-ui/react"; import { theme } from "./styles/theme"; -import { useEffect } from "react"; +import { useEffect,useState } from "react"; export function Providers({ children }: { children: React.ReactNode }) { // useEffect(() => { @@ -9,6 +9,11 @@ export function Providers({ children }: { children: React.ReactNode }) { // window.location.href = "/mobile"; // } // }, []); + const [isHydrated, setIsHydrated] = useState(false); + + useEffect(() => { + setIsHydrated(true); + }, []); - return {children}; + return isHydrated?{children}:null; } diff --git a/lib/server-functions.ts b/lib/server-functions.ts index dd1812f..ad3b6ff 100644 --- a/lib/server-functions.ts +++ b/lib/server-functions.ts @@ -5,9 +5,11 @@ import typescript from "typescript"; import { contentManager } from "./contentManager"; import { CodeFileExports, Metadata } from "./types"; +import path from "path"; export function parseLessonFolder(fullFilePath: string, codePath: string) { - const file = fs.readFileSync(fullFilePath, "utf-8"); + const absolutePath=path.join(process.cwd(),fullFilePath) + const file = fs.readFileSync(absolutePath, "utf-8"); const { content, data } = matter(file); const Page = () => CustomMDX({ source: content }); @@ -25,10 +27,11 @@ function transpileTypeScriptToJavaScript(tsCode: string) { } export function getCodeFileExports(fullFilePath: string) { - const fileContent = fs.readFileSync(fullFilePath, "utf-8"); + const absolutePath=path.join(process.cwd(),fullFilePath) + const file = fs.readFileSync(absolutePath, "utf-8"); const dynmicFunction = new Function( "module", - transpileTypeScriptToJavaScript(fileContent), + transpileTypeScriptToJavaScript(file), ); const moduleExports: {} | CodeFileExports = {}; dynmicFunction(moduleExports); diff --git a/package.json b/package.json index f7041ae..41bb5c5 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "private": true, "type": "module", "scripts": { - "next-dev": "next dev", + "next-dev": "next dev --turbo", "content-watch": "nodemon --ext ts,mdx --watch ./content --ignore ./content/outline.json --exec \"tsx ./scripts/generateOutline.ts\"", "dev": "concurrently \"pnpm run next-dev\" \"pnpm run content-watch\"", "build": "tsx ./scripts/generateOutline.ts && next build",