Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Internationalization throws hydration error in Next.js #36011

Open
bwmirek opened this issue Jun 11, 2022 · 9 comments
Open

Internationalization throws hydration error in Next.js #36011

bwmirek opened this issue Jun 11, 2022 · 9 comments
Labels
🐛 Bug Ant Design Team had proved that this is a bug. help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive

Comments

@bwmirek
Copy link

bwmirek commented Jun 11, 2022 •
edited

Reproduction link

https://github.com/bwmirek/antd-nextjs-locale-bug

Steps to reproduce

Reproduction repo:

  1. Install deps
yarn install
  1. Run app
yarn dev
  1. Open app in browser

New project

  1. Create Next.js App
yarn create next-app --typescript
  1. Install antd
yarn add antd
  1. Add i18n component to the page:
// file: pages/index.tsx
import type { NextPage } from 'next';
import { ConfigProvider, Calendar } from 'antd';

import plPL from 'antd/lib/locale/pl_PL';

import 'antd/dist/antd.css';

const Home: NextPage = () => {
  return (
    <ConfigProvider locale={plPL}>
      <Calendar/>
    </ConfigProvider>
  );
};

export default Home;
  1. Run app
yarn dev
  1. Open app in browser

What is expected?

Component should be rendered the same way both on the server and the client.

What is actually happening?

Component is rendered differently on the server than the client, causing hydration error: "Hydration failed because the initial UI does not match what was rendered on the server".

Environment Info
antd 4.21.0
React 18.1.0
System Windows 10
Browser Google Chrome 102.0.5005.63

Next.js version: 12.1.6, may be related to SSR.
@afc163 afc163 mentioned this issue Jun 12, 2022
Closed
@afc163
Copy link
Member

afc163 commented Jun 12, 2022

Modal has same issue: #35351

@afc163 afc163 added 🐛 Bug Ant Design Team had proved that this is a bug. help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. labels Jun 12, 2022
@github-actions
Copy link
Contributor

Hello @bwmirek. We totally like your proposal/feedback, welcome to send us a Pull Request for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the Pull Request Template here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!

你好 @bwmirek，我们完全同意你的提议/反馈，欢迎直接在此仓库 创建一个 Pull Request 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的预设模板，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。

giphy

@hemengke1997
Copy link
Contributor

in React17.0.2, this issue will be occured if use forceRender

@herbertpimentel
Copy link

herbertpimentel commented Aug 19, 2022 •
edited

@bwmirek did you find a workaround for that !?

I mean, it still happens on "next": "12.2.4"

For anyone that comes here in the future. I was able to solve it by changing

'antd/es/locale/pt_BR' to 'antd/lib/locale/pr_BR'

@IonelLupu
Copy link

Got the same error but for the modal issue (next.js 13.1.0).

@github-actions github-actions bot mentioned this issue Dec 26, 2022
Closed
@github-actions github-actions bot mentioned this issue Jan 19, 2023
Closed
@bombillazo
Copy link
Contributor

Im getting this error when we render page with a Modal open by default. What is the fix for not getting this error?

@MadCcc
Copy link
Member

MadCcc commented Sep 11, 2023

Im getting this error when we render page with a Modal open by default. What is the fix for not getting this error?

Have you tried forceRender?

@bombillazo
Copy link
Contributor

I tried it, same behavior

@escX
Copy link

escX commented Mar 12, 2024 •
edited

I use page router, and I resolve it by using dynamic.

In components/Layout.tsx

import React from "react"
import { Inter } from "next/font/google"

const inter = Inter({ subsets: ["latin"] })

export default function Layout({ children }: { children: React.ReactNode }) {
  return <main className={inter.className}>
    {children}
  </main>
}

In src/pages/_app.jsx

import type { AppProps } from "next/app"
import dynamic from "next/dynamic"
import Head from "next/head"

export default function App({ Component, pageProps }: AppProps) {
  const Layout = dynamic(() => import('@/components/Layout'), {
    ssr: false
  })

  return <>
    <Head>
      <title>SimFi</title>
      <meta name="description" content="Web for SimFi" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </Head>

    <Layout>
      <Component {...pageProps} />
    </Layout>
  </>
}

But I'm confused since ssr: false seem useless.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug Ant Design Team had proved that this is a bug. help wanted The suggestion or request has been accepted, we need you to help us by sending a pull request. Inactive
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@afc163 @herbertpimentel @IonelLupu @bwmirek @escX @MadCcc @bombillazo @hemengke1997