Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

DevTools causes hydration errrors on page refresh in Next.js

Đang mở
  • Có gì không ổn?
#187 5 bình luận 11 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
25/100
Loại issue
Lỗi
Độ rõ ràng
Cần làm rõ
Mức độ hoạt động
Đình trệ
Công nghệ
next.js, react, typescript
Lĩnh vực
frontend, web-dev

Hướng nghiên cứu

Start with src/core/components/Form.tsx and reproduce the hydration errors on a page that imports DevTool, comparing a refresh with DevTool removed. Check the listed Next.js, React, and @hookform/devtools versions and identify a minimal reproduction; done means the refresh no longer produces hydration errors while DevTool remains usable.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

I thought I had done something wonky in my app when these errors started appearing. I rolled back on some changes and learned that they appeared when I refresh the page that has the component imported.

I am working within a Blitz.js app which is built on Next.js (I am unsure, but am lead to believe that this is a problem within Next.js?)

The

component used by default in the Blitz.js installation is a little bit of a beast, in my opinion, and I added a couple more details to allow me to pass a custom prop to the child inputs.

My Form Component

// src / core / components / Form.tsx
// --> COMPONENT <-

// Node Modules Imports
import { useState, ReactNode, PropsWithoutRef, Children, cloneElement } from "react"
import { FormProvider, useForm, UseFormProps } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { DevTool } from "@hookform/devtools"

// TS Declarations
export interface FormProps<S extends z.ZodType<any, any>>
  extends Omit<PropsWithoutRef<JSX.IntrinsicElements["form"]>, "onSubmit"> {
  /** All your form fields */
  children?: ReactNode
  /** Text to display in the submit button */
  schema?: S
  onSubmit: (values: z.infer<S>) => Promise<void | OnSubmitResult>
  initialValues?: UseFormProps<z.infer<S>>["defaultValues"]
  formtype?: string
}

interface OnSubmitResult {
  FORM_ERROR?: string
  [prop: string]: any
}

export const FORM_ERROR = "FORM_ERROR"

export function Form<S extends z.ZodType<any, any>>({
  children,
  schema,
  initialValues,
  onSubmit,
  formtype = "submit",
  ...props
}: FormProps<S>) {
  const ctx = useForm<z.infer<S>>({
    mode: "onChange",
    resolver: schema ? zodResolver(schema) : undefined,
    defaultValues: initialValues,
  })
  const [formError, setFormError] = useState<string | null>(null)

  let isProd = process.env.NODE_ENV === "production"

  return (
    <FormProvider {...ctx}>
      <form
        onSubmit={ctx.handleSubmit(async (values) => {
          const result = (await onSubmit(values)) || {}
          for (const [key, value] of Object.entries(result)) {
            if (key === FORM_ERROR) {
              setFormError(value)
            } else {
              ctx.setError(key as any, {
                type: "submit",
                message: value,
              })
            }
          }
        })}
        className="space-y-4"
        {...props}
      >
        {/* Form fields supplied as children are rendered here */}
        {Children.map(children, (child) =>
          cloneElement(child as React.ReactElement, { formtype })
        )}

        {formError && (
          <div role="alert" className="text-salmon-500 text-center">
            {formError}
          </div>
        )}


      </form>
      {!isProd && <DevTool control={ctx.control} /> }

    </FormProvider>
  )
}

export default Form

Again, the hydration errors ONLY occur when I refresh the page. They are listed in the following screenshot. I have not tried anything as a solution, but they do not appear when I remove the component.

Screenshot 2022-12-29 at 10 51 22 PM

The following is my package.json dependencies:

"dependencies": {
    "@blitzjs/auth": "2.0.0-beta.19",
    "@blitzjs/next": "2.0.0-beta.19",
    "@blitzjs/rpc": "2.0.0-beta.19",
    "@headlessui/react": "1.7.7",
    "@heroicons/react": "2.0.13",
    "@hookform/error-message": "2.0.1",
    "@hookform/resolvers": "2.9.10",
    "@prisma/client": "4.8.0",
    "blitz": "2.0.0-beta.19",
    "framer-motion": "7.10.2",
    "next": "12.2.5",
    "node-device-detector": "2.0.9",
    "postmark": "3.0.14",
    "prisma": "4.8.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-hook-form": "7.40.0",
    "react-icons": "4.7.1",
    "zod": "3.20.2"
  },
  "devDependencies": {
    "@hookform/devtools": "4.3.0",
    "@next/bundle-analyzer": "12.0.8",
    "@tailwindcss/forms": "0.5.3",
    "@testing-library/jest-dom": "5.16.3",
    "@testing-library/react": "13.4.0",
    "@testing-library/react-hooks": "8.0.1",
    "@types/jest": "29.2.2",
    "@types/node": "18.11.9",
    "@types/preview-email": "2.0.1",
    "@types/react": "18.0.25",
    "@typescript-eslint/eslint-plugin": "5.30.5",
    "autoprefixer": "10.4.13",
    "eslint": "8.27.0",
    "eslint-config-next": "12.3.1",
    "eslint-config-prettier": "8.5.0",
    "husky": "8.0.2",
    "jest": "29.3.0",
    "jest-environment-jsdom": "29.3.0",
    "lint-staged": "13.0.3",
    "postcss": "8.4.19",
    "prettier": "^2.7.1",
    "prettier-plugin-prisma": "4.4.0",
    "pretty-quick": "3.1.3",
    "preview-email": "3.0.7",
    "tailwindcss": "3.2.4",
    "ts-jest": "28.0.7",
    "typescript": "^4.8.4"
  },
Ngôn ngữ chính
TypeScript
Star
670
Fork
55
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của react-hook-form/devtools

Tất cả issue của react-hook-form/devtools

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.