React Hook Form
Replies: 6 comments 8 replies
-
|
I've encountered the same issue with Next.js 14 and found that it's caused by client-/server-side execution. On the server, there's no |
Beta Was this translation helpful? Give feedback.
-
|
You just create two similar validation schemas for both client and a server. export const createWishServerSchema = z.object({
preview: z
.unknown()
.optional()
.transform((value) => {
return value as File | null | undefined;
})
.refine(
(file) => {
if (!file) {
return true;
}
const fileExtension = file.name.split('.').pop();
return !!fileExtension && validExtensions.includes(fileExtension);
},
{ message: `Valid types: ${validExtensions}` },
)
.refine(
(file) => {
if (!file) {
return true;
}
return toMb(file.size) <= MAX_FILE_SIZE_MB;
},
{
message: `File size must be less than ${MAX_FILE_SIZE_MB}MB`,
},
),
});
export const createWishClientSchema = z.object({
preview: z
.unknown()
.transform((value) => {
return value as FileList | null | undefined;
})
.transform((value) => value?.item(0))
.refine(
(file) => {
if (!file) {
return true;
}
const fileExtension = file.name.split('.').pop();
return !!fileExtension && validExtensions.includes(fileExtension);
},
{ message: `Valid types: ${validExtensions}` },
)
.refine(
(file) => {
if (!file) {
return true;
}
return toMb(file.size) <= MAX_FILE_SIZE_MB;
},
{
message: `File size must be less than ${MAX_FILE_SIZE_MB}MB`,
},
),
});And then use client one for validation on the client, and the other one for the validation on the server in your server action. Probably schemas could be merged into same objects to reduce code duplication, but you should get the idea at that point |
Beta Was this translation helpful? Give feedback.
-
image: z.unknown().transform(value => {
return value as FileList
}),This worked perfectly fine for me! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you :) |
Beta Was this translation helpful? Give feedback.
-
|
Thank you ! worked ! |
Beta Was this translation helpful? Give feedback.
-
|
Amazing stuff @bbarchuk you just saved me hours of debugging |
Beta Was this translation helpful? Give feedback.
-
|
I put "use client" at the root of my page.tsx. I then had a component inside that used FileList in a zod schema. Same error of "ReferenceError: FileList is not defined". What a pain...I just removed FileList and wrote z.any(). |
Beta Was this translation helpful? Give feedback.
-
|
Same for me. Also on 'use client' pages I get this error which prevents me from building my project. Falling back to any as well |
Beta Was this translation helpful? Give feedback.
-
|
Using "dynamic" solved the problem for me. In page.tsx this is the checkout form component |
Beta Was this translation helpful? Give feedback.
-
|
This is my solution for this problem |
Beta Was this translation helpful? Give feedback.
-
|
Filelist doesn't exists on node.js. import { z } from 'zod'
// valid as SSR is disabled for using FileList
const isServer = typeof window === 'undefined'
export const newSongSchema = z.object({
image: z
.instanceof(File, { message: 'Image is required' })
.refine((file) => file.size > 0, 'Image is required')
.refine((file) => file.size <= 10 * 1024 * 1024, 'Max image size is 10MB')
.refine((file) => file.type?.startsWith('image/'), 'Invalid image format'),
song: z
.instanceof(isServer ? File : FileList, { message: 'Required' })
.transform((value) => value instanceof File ? value : value?.item(0)! || {})
.refine((file) => file.size > 0, 'Song is required')
.refine((file) => file.size <= 100 * 1024 * 1024, 'Max song size is 100MB')
.refine((file) => file.type?.startsWith('audio/'), 'Invalid song format'),
}) |
Beta Was this translation helpful? Give feedback.
-
|
It worked for me like this: {
resume: isServer ? z.any() : z.instanceof(FileList),
}Thanks |
Beta Was this translation helpful? Give feedback.
-
|
My solution was to use const fileSchema = z
.instanceof(globalThis.FileList)
.refine((fl) => fl && fl.length > 0, formTexts.file.validate.required)
.transform((fl) => fl[0])
.refine((f) => f.size <= formTexts.file.validate.size, formTexts.file.validate.sizeText)
.refine((f) => ACCEPTED_FILE_TYPES.includes(f.type), formTexts.file.validate.typeFile) |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
It happens when I run "npm run build"
let me show you the complete error
and where I am using "FileList"?
I don´t whant to make it really long, so here is the complete code of the first componente where I use it:
https://github.com/KatuGT/sonieQue/blob/front/postSuenio/src/components/PostSuenio.tsx
and the function https://github.com/KatuGT/sonieQue/blob/front/postSuenio/src/utils/uploadImages.tsx
It is a Typescript, React Hook form, zod or a Next.js error/bug? or my error?
of course I made my research in google, chat GPT and the Bing chat but don´t help me with this
Beta Was this translation helpful? Give feedback.
All reactions