You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
Here's a slightly updated, typescript-compatible version of it that worked for me (hope it can save a few minutes for others like me who enjoy having a painful eslint config 😄 ):
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
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.
The following is my package.json dependencies:
The text was updated successfully, but these errors were encountered: