Error: Unexpected end of JSON input

Unanswered

Alligator mississippiensis posted this in #help-forum

Open in Discord

Alligator mississippiensisOP

2023-12-01T10:26:48.000Z

I am encountering with "Error: Unexpected end of JSON input" error. while doing fetch request.

22 Replies

Alligator mississippiensisOP

2023-12-01T10:27:38.000Z

this is my server function :

"use server";

/**
 * 
 * create a channel
 */
export async function create(formData: FormData) {
  const res = await fetch(process.env.NEXTAUTH_URL+"/api/create", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: formData,
  });

  return res.json();
}

this is my form component:

<form className="space-y-10 md:w-[500px]" action={create}>
        <Input
          value={id}
          isReadOnly={true}
          name="chnl_id"
          variant="faded"
          classNames={{
            inputWrapper:
              "h-[50px] dark:bg-neutral-800 dark:text-[#999] bg-neutral-200 text-[#888]",
            label: "dark:text-white/70 text-black",
          }}
          labelPlacement="inside"
          type="text"
          label="Channel ID"
          placeholder=""
        />
        <Input
          isRequired
          onChange={handleChange}
          name="chnl_name"
          variant="faded"
          classNames={{
            inputWrapper:
              "h-[50px] dark:bg-neutral-800 dark:text-white bg-neutral-200 text-black",
            label: "dark:text-white/70 text-black",
          }}
          labelPlacement="outside"
          type="text"
          label="Channel name"
          placeholder="e.g. Welcomers"
        />
        <Input
          isRequired
          name="chnl_desc"
          variant="faded"
          classNames={{
            inputWrapper:
              "h-[50px] dark:bg-neutral-800 dark:text-white bg-neutral-200 text-black",
            label: "dark:text-white/70 text-black",
          }}
          labelPlacement="outside"
          type="text"
          label="Description"
          placeholder="e.g. Come and say hello!"
        />
        <Autocomplete
          name="category"
          isRequired
          defaultItems={channel_categories}
          label="Category"
          labelPlacement="outside"
          placeholder="e.g. Technology"
          classNames={{
            base: "h-[50px]",
          }}
          variant="faded"
        >
          {(category) => (
            <AutocompleteItem key={category.label} value={category.value}>
              {category.label}
            </AutocompleteItem>
          )}
        </Autocomplete>
        <SubmitButton />
      </form>

this is my route handler:

import Channels from "@/models/Channels";
import connect from "@/utils/server-helper";
import { NextRequest, NextResponse } from "next/server";

type TChannel ={
    chnl_id: string,
    chnl_name: string,
    chnl_desc: string,
    category: string,
};

export async function POST(req:NextRequest, res:NextResponse) {
    const formData = await req.formData();
    const { chnl_id, chnl_name, chnl_desc, category } = formData as unknown as TChannel;

    await connect();
    const existing_channel = await Channels.findOne({chnl_id});
    if(existing_channel) { //if there is an existing channel with the same email
        return new NextResponse("Channel is already created", {status:400}) //throw a Next.js Response with an error
    }

    if(!chnl_id || !chnl_name || !chnl_desc || !category) {
        return new NextResponse("Invalid Data", {status:422})
    }

    const newChannel = new Channels({
        chnl_id,
        chnl_name,
        chnl_desc,
        category,
    })

    try {
        await newChannel.save();
        return NextResponse.json("Channel is created",{status:200})
        
    } catch (error) {
        console.log(error)

        return NextResponse.json({message: "Server error"},{status:500})

    }

}

@Alligator mississippiensis this is my server function : typescript "use server"; /** * * create a channel */ export async function create(formData: FormData) { const res = await fetch(process.env.NEXTAUTH_URL+"/api/create", { method: "POST", headers: { "Content-Type": "application/json", }, body: formData, }); return res.json(); }

Ray

2023-12-01T10:30:35.000Z

does the endpoint receive json or formData

Alligator mississippiensisOP

2023-12-01T10:30:44.000Z

formData only

Ray

2023-12-01T10:31:04.000Z

remove "Content-Type": "application/json" i guess

Alligator mississippiensisOP

2023-12-01T10:31:18.000Z

i am on it

new error : Error: Unexpected token I in JSON at position 0

i just removed headers

Ray

2023-12-01T10:33:12.000Z

ah ok I see what happen now

with server action, you don't need to create the api endpoint anymore

Alligator mississippiensisOP

2023-12-01T10:34:59.000Z

ahh ok, thats the problem causing this error

thank you very much

Ray

2023-12-01T10:35:37.000Z

export async function create(formData: FormData) {
    const { chnl_id, chnl_name, chnl_desc, category } = formData as unknown as TChannel;


    if(!chnl_id || !chnl_name || !chnl_desc || !category) {
        return { error: 'Invalid Data' }
    }

    await connect();
    const existing_channel = await Channels.findOne({chnl_id});
    if(existing_channel) { //if there is an existing channel with the same email
        return { error: 'Channel is already created' } //throw a Next.js Response with an error
    }

    const newChannel = new Channels({
        chnl_id,
        chnl_name,
        chnl_desc,
        category,
    })

    try {
        await newChannel.save();
        return { message: "Channel is created" }
        
    } catch (error) {
        console.log(error)

        return { message: "Server error" }

    }
}