From fb3c09325d7bf58aed13c6d0fb1f72b92ff0ef3a Mon Sep 17 00:00:00 2001
From: Tatsuya Itakura
Date: Thu, 14 Jul 2022 01:39:34 +0900
Subject: [PATCH] Fix hydration issues (#6309)
* fix: fix hydration issues
* chore: add color mode config and suspense
---
.changeset/quiet-spiders-lay.md | 5 ++
.changeset/tiny-rabbits-admire.md | 6 ++
examples/nextjs-typescript/Chakra.tsx | 2 +
.../nextjs-typescript/pages/_document.tsx | 3 +-
examples/nextjs-typescript/pages/index.tsx | 57 ++++++++++---------
examples/nextjs-typescript/theme.ts | 10 ++++
.../color-mode/src/color-mode-provider.tsx | 5 +-
packages/env/src/env.tsx | 5 +-
8 files changed, 61 insertions(+), 32 deletions(-)
create mode 100644 .changeset/quiet-spiders-lay.md
create mode 100644 .changeset/tiny-rabbits-admire.md
create mode 100644 examples/nextjs-typescript/theme.ts
diff --git a/.changeset/quiet-spiders-lay.md b/.changeset/quiet-spiders-lay.md
new file mode 100644
index 00000000000..b1f6855ed9a
--- /dev/null
+++ b/.changeset/quiet-spiders-lay.md
@@ -0,0 +1,5 @@
+---
+"chakra-nextjs-ts": patch
+---
+
+add color mode config and suspense
diff --git a/.changeset/tiny-rabbits-admire.md b/.changeset/tiny-rabbits-admire.md
new file mode 100644
index 00000000000..6aaf9816bb6
--- /dev/null
+++ b/.changeset/tiny-rabbits-admire.md
@@ -0,0 +1,6 @@
+---
+"@chakra-ui/color-mode": patch
+"@chakra-ui/react-env": patch
+---
+
+fix hydration issue
diff --git a/examples/nextjs-typescript/Chakra.tsx b/examples/nextjs-typescript/Chakra.tsx
index c66a7165c77..49540aa1cf5 100644
--- a/examples/nextjs-typescript/Chakra.tsx
+++ b/examples/nextjs-typescript/Chakra.tsx
@@ -5,6 +5,7 @@ import {
} from "@chakra-ui/react"
import { GetServerSidePropsContext } from "next"
import { ReactNode } from "react"
+import theme from "./theme"
interface ChakraProps {
cookies?: string
@@ -15,6 +16,7 @@ export const Chakra = ({ children, cookies }: ChakraProps) => {
return (
{children}
diff --git a/examples/nextjs-typescript/pages/_document.tsx b/examples/nextjs-typescript/pages/_document.tsx
index f078fbf1f0a..3d09e3f5a3d 100644
--- a/examples/nextjs-typescript/pages/_document.tsx
+++ b/examples/nextjs-typescript/pages/_document.tsx
@@ -6,6 +6,7 @@ import NextDocument, {
NextScript,
DocumentContext,
} from "next/document"
+import theme from "../theme"
export default class Document extends NextDocument {
static getInitialProps(ctx: DocumentContext) {
@@ -17,7 +18,7 @@ export default class Document extends NextDocument {
-
+
diff --git a/examples/nextjs-typescript/pages/index.tsx b/examples/nextjs-typescript/pages/index.tsx
index 46802a7665b..955ac22cd9b 100644
--- a/examples/nextjs-typescript/pages/index.tsx
+++ b/examples/nextjs-typescript/pages/index.tsx
@@ -3,6 +3,7 @@ import { Chakra } from "../Chakra"
import { Layout } from "../components/Layout"
import { Logo } from "../components/Logo"
import { NextChakraLink } from "../components/NextChakraLink"
+import { Suspense } from "react"
interface IndexProps {
cookies?: string
@@ -11,33 +12,35 @@ interface IndexProps {
const IndexPage = ({ cookies }: IndexProps) => (
-
-
-
-
-
- Edit pages/index.tsx and save to
- reload.
-
-
-
- View the properties
- {" "}
- to see the Nextjs <Link> in
- action
-
-
- Learn more about Chakra
-
-
-
-
+
+
+
+
+
+
+ Edit pages/index.tsx and save to
+ reload.
+
+
+
+ View the properties
+ {" "}
+ to see the Nextjs <Link> in
+ action
+
+
+ Learn more about Chakra
+
+
+
+
+
)
diff --git a/examples/nextjs-typescript/theme.ts b/examples/nextjs-typescript/theme.ts
new file mode 100644
index 00000000000..39acee09699
--- /dev/null
+++ b/examples/nextjs-typescript/theme.ts
@@ -0,0 +1,10 @@
+import { extendTheme, type ThemeConfig } from "@chakra-ui/react"
+
+const config: ThemeConfig = {
+ initialColorMode: "system",
+ useSystemColorMode: true,
+}
+
+const theme = extendTheme({ config })
+
+export default theme
diff --git a/packages/color-mode/src/color-mode-provider.tsx b/packages/color-mode/src/color-mode-provider.tsx
index c4e93f9f3c9..c2c23f233ef 100644
--- a/packages/color-mode/src/color-mode-provider.tsx
+++ b/packages/color-mode/src/color-mode-provider.tsx
@@ -107,7 +107,7 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
- useSafeLayoutEffect(() => {
+ React.useEffect(() => {
const managerValue = colorModeManager.get()
if (managerValue) {
@@ -121,8 +121,7 @@ export function ColorModeProvider(props: ColorModeProviderProps) {
}
setColorMode(defaultColorMode)
- //
- }, [colorModeManager, defaultColorMode, initialColorMode, getSystemTheme])
+ }, [colorModeManager, defaultColorMode, initialColorMode, setColorMode])
const toggleColorMode = React.useCallback(() => {
setColorMode(resolvedValue === "dark" ? "light" : "dark")
diff --git a/packages/env/src/env.tsx b/packages/env/src/env.tsx
index 759b96f97a8..f53d08d0a7d 100644
--- a/packages/env/src/env.tsx
+++ b/packages/env/src/env.tsx
@@ -1,6 +1,7 @@
import { isBrowser, __DEV__ } from "@chakra-ui/utils"
import React, {
createContext,
+ startTransition,
useContext,
useMemo,
useState,
@@ -57,7 +58,9 @@ export function EnvironmentProvider(props: EnvironmentProviderProps) {
{mounted && (
{
- if (el) setNode(el)
+ startTransition(() => {
+ if (el) setNode(el)
+ })
}}
/>
)}