FileList is not defined - ReactHookForm+zodwith Next js and typescript

[KatuGT]

It happens when I run "npm run build"

let me show you the complete error

Compiled with warnings

./node_modules/node-fetch/lib/index.js
Module not found: Can't resolve 'encoding' in 'C:\Users\KATU\Desktop\sonieQue\node_modules\node-fetch\lib'

Import trace for requested module:
./node_modules/node-fetch/lib/index.js
./node_modules/@firebase/storage/dist/node-esm/index.node.esm.js
./node_modules/firebase/storage/dist/index.mjs
./src/utils/uploadImages.tsx
./src/components/PostSuenio.tsx
./src/app/page.tsx

 ✓ Linting and checking validity of types    
 ✓ Collecting page data    
   Generating static pages (9/10)  [   =]
ReferenceError: FileList is not defined
    at components_PostSuenio (C:\Users\KATU\Desktop\sonieQue\.next\server\app\page.js:1:7752)  
    at nd (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:35308)
    at nh (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:50922)
    at ny (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:53901)
    at nm (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:52967)
    at nh (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:51168)
    at ny (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:53901)
    at nd (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:45663)
    at nh (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:50922)
    at ny (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:53901)

Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
ReferenceError: FileList is not defined
    at components_PostSuenio (C:\Users\KATU\Desktop\sonieQue\.next\server\app\page.js:1:7752)  
    at nd (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:35308)
    at nh (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:50922)
    at ny (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.runtime.prod.js:27:53901)
    at nm (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.-server\app-page.runtime.prod.js:27:52967)
    at nh (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.-server\app-page.runtime.prod.js:27:51168)
    at ny (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.-server\app-page.runtime.prod.js:27:53901)
    at nd (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.-server\app-page.runtime.prod.js:27:45663)
    at nh (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.-server\app-page.runtime.prod.js:27:50922)
    at ny (C:\Users\KATU\Desktop\sonieQue\node_modules\next\dist\compiled\next-server\app-page.-server\app-page. ✓ Generating static pages (10/10)

> Export encountered errors on following paths:
        /page: /
   Creating an optimized production build  .

and where I am using "FileList"?

interface PostSuenioProps {
  texto: string;
  imagenes: FileList;
}

 const postSueniosSchema = z.object({
    texto: z.string(),
    imagenes: z.instanceof(FileList),
  });

export const uploadImages = async (files: FileList) => {
  
  const uploadPromises = Array.from(files).map((file) => {

    const newName = new Date().getTime() + "-image";
    
    const storageRef = ref(storage, newName);
    const uploadTask = uploadBytesResumable(storageRef, file);

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

[tryonelove]

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 FileList; it's the File API coming from the client, e.g., the browser. In my case, creating an additional validation schema for client/server has helped.

[QingjiaTsang]

how do you solve the problem? could you please share the solution code, thx!

[tryonelove]

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

[kleenkanteen]

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().

[rnnyrk]

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

[D-Gar27]

Using "dynamic" solved the problem for me.

In page.tsx

import dynamic from "next/dynamic";
const CheckoutForm = dynamic(
  () => import("@/components/pages/checkout/CheckoutForm"),
  {
    ssr: false,
  }
);

transfer_evidence: z
    .instanceof(FileList)
    .refine((files) => files?.length >= 1, {
      message: "Transfer evidence is required",
    })
    .refine((files) => ACCEPTED_IMAGE_TYPES.includes(files?.[0]?.type), {
      message: ".jpg, .jpeg, and .png files are accepted.",
    }),

this is the checkout form component

"use client";

import { CheckoutSchema } from "@/lib/schemas/checkoutSchema";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";

export default function CheckoutForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<z.infer<typeof CheckoutSchema>>({
    resolver: zodResolver(CheckoutSchema),
  });

  function handleSubmit(values: z.infer<typeof CheckoutSchema>) {
    console.log(values);
  }
  return (
    <form
      id="checkout"
      className="w-full max-w-[700px] flex flex-col gap-5"
      onSubmit={handleSubmit(handleSubmit)}
    >
      <TransferEvidence
        error={errors["transfer_evidence"]}
        register={register("transfer_evidence", { required: true })}
        required
      />
    </form>
  );
}

[ahmedkhabar]

This is my solution for this problem
 
First I check if the typeof window === "undefined" -> That's mean that the validation running on the server side because as we know, there is no window in the server side then I use z.any(), else I'm using z.instanceof(FileList) because there I know that I'm in client side and in the client side the FileList type is declared. I hope That will help full.