error TypeError: Cannot read properties of undefined (reading 'headers')

Answered

Standard Chinchilla posted this in #help-forum

Standard ChinchillaOP

2023-06-11T05:01:51.000Z

Keeps on returning this when hitting this endpoint

import { prisma } from '../../../lib/prisma'
export async function POST(request: Request) {
  const res:  = await request.json()
  const userExists = await prisma.user.findUnique({
    where: {
      email: res.email,
    },
  })
}

Answered by joulev

i reported it here https://github.com/vercel/next.js/issues/51130

View full answer

77 Replies

Alfonsus Ardani

2023-06-11T05:04:06.000Z

are you sure this code is correct? it says res: = await request.json()

Standard ChinchillaOP

2023-06-11T05:04:54.000Z

yea I mean i put the type now

import { hash } from 'bcrypt'
import { prisma } from '../../../lib/prisma'
import { CreateUserDto } from '../../../types'

export async function POST(request: Request) {
  const res: CreateUserDto = await request.json()
  const userExists = await prisma.user.findUnique({
    where: {
      email: res.email,
    },
  })
  if (!userExists) {
    const hashedPassword = await hash(res.password, 10)
    const user = await prisma.user.create({
      data: { email: res.email, name: res.name, password: hashedPassword },
    })
    delete user.password
    return user
  }
}

Alfonsus Ardani

2023-06-11T05:05:35.000Z

and what is the error

Standard ChinchillaOP

2023-06-11T05:06:37.000Z

error TypeError: Cannot read properties of undefined (reading 'headers')

Alfonsus Ardani

2023-06-11T05:07:13.000Z

i dont think ure supposed to return user

you need to return NextResponse
so if you're returning json object its return NextResponse.json(...data...)
or if its just a status its return new NextResponse(undefined, {status: 200})

Standard ChinchillaOP

2023-06-11T05:08:10.000Z

I mean not like that yes

Alfonsus Ardani

2023-06-11T05:08:25.000Z

in what line did this error occur?

Standard ChinchillaOP

2023-06-11T05:08:29.000Z

its giving webpack stuff

Alfonsus Ardani

2023-06-11T05:08:37.000Z

...

try sending the whole error log

Standard ChinchillaOP

2023-06-11T05:09:29.000Z

thats it

happens as soon as I hit the endpoint

export async function POST(request: Request) {
  const res: CreateUserDto = await request.json()
  const userExists = await prisma.user.findUnique({
    where: {
      email: res.email,
    },
  })
  if (!userExists) {
    const hashedPassword = await hash(res.password, 10)
    const user = await prisma.user.create({
      data: { email: res.email, name: res.name, password: hashedPassword },
    })

    //@ts-ignore
    delete user.password
    return NextResponse.json(user)
  } else {
    console.log(userExists)
    //@ts-ignore
    delete userExists.password

    NextResponse.json(userExists)
  }
}

sometimes it sends sometimes it doesn't

joulev

2023-06-11T05:13:54.000Z

this smells like a nextjs bug icl

does a very minimal endpoint work?

export async function POST(request: Request) {
  const json = await request.json();
  console.log(json);
  return NextResponse.json({});
}

Standard ChinchillaOP

2023-06-11T05:17:04.000Z

export async function GET() {
  console.log('GET /api/whop')
}

this doesn't

import { NextResponse } from 'next/server'

export async function POST(request: Request) {
  const json = await request.json()
  console.log(json)
  return NextResponse.json({})
}

this des

joulev

2023-06-11T05:17:59.000Z

wdym by doesn't and does?

both of these should work by the way

Standard ChinchillaOP

2023-06-11T05:18:08.000Z

returns the header error

joulev

2023-06-11T05:18:20.000Z

hmm interesting, this is 99% a nextjs bug now

Standard ChinchillaOP

2023-06-11T05:18:28.000Z

seems to be

joulev

2023-06-11T05:22:54.000Z

100% a nextjs bug, i can reproduce

except... it's not? this throws the error

export async function POST(request: Request) {
  const json = await request.json();
  console.log(json);
}

but this doesn't

import { NextResponse } from "next/server";

export async function POST(request: Request) {
  const json = await request.json();
  console.log(json);
  return NextResponse.json({});
}

Standard ChinchillaOP

2023-06-11T05:33:18.000Z

yes ig when you don't return NextResponse

it happens

joulev

2023-06-11T05:33:44.000Z

should still be a bug, at least the error should've been clearer

Standard ChinchillaOP

2023-06-11T05:42:46.000Z

yes

joulev

2023-06-11T14:07:43.000Z

i reported it here https://github.com/vercel/next.js/issues/51130

Answer

Standard ChinchillaOP

2023-06-12T07:53:42.000Z

@joulev

import { NextRequest, NextResponse } from 'next/server'
import { getServerSession } from 'next-auth'
import { prisma } from '../../../lib/prisma'
import { authOptions } from '../../authOptions'
import { redirect } from 'next/navigation'

export const dynamic = 'force-dynamic'
export async function GET(request: NextRequest, response: NextResponse) {
  const session = await getServerSession(authOptions)

  const url = new URL(request.url)
  const params = new URLSearchParams(url.search)
  const code = params.get('code')

  if (!session) {
    return NextResponse.json('No user in session', { status: 400 })
  }
  if (!code) {
    return NextResponse.json('Invalid Request')
  }

  try {
    const res = await (
      await fetch('https://data.whop.com/api/v3/oauth/token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
          grant_type: 'authorization_code',
          code: code,
          client_id: process.env.WHOP_CLIENT_ID,
          client_secret: process.env.WHOP_CLIENT_SECRET,
          redirect_uri: process.env.WHOP_REDIRECT_URI,
        }).toString(),
      })
    ).json()
    console.log(res.access_token)
    const userDetails = await (
      await fetch('https://api.whop.com/api/v2/me', {
        headers: {
          Authorization: `Bearer ${res.access_token}`,
        },
      })
    ).json()

    console.log(userDetails)
    await prisma.user.update({
      where: {
        email: session?.user.email!,
      },
      data: {
        whopId: userDetails.id,
      },
    })
    return redirect('/')
  } catch (e) {
    NextResponse.json({ errors: `${e}` }, { status: 400 })
  }
}

I have this now I am supposed to redirect how do i do that

it keeps on throwing that error

joulev

2023-06-12T07:55:07.000Z

try removing the return before redirect()

redirect() throws an error so doesnt need return

oh wait

redirect() throws an error, so your try-catch is catching it

you should not catch it

Standard ChinchillaOP

2023-06-12T07:55:48.000Z

didnt work

yes

hmm

joulev

2023-06-12T07:56:17.000Z

rewrite this to something like

try {
  // do other things
  } catch (e) {
    return NextResponse.json({ errors: `${e}` }, { status: 400 })
  }

// move redirect outside the try-catch
redirect('/')

if an error is caught, it will return that json

so redirect() is only run in the happy path

Standard ChinchillaOP

2023-06-12T07:56:46.000Z

works thanks

joulev

2023-06-12T08:02:36.000Z

i will now close this thread, if you have a new question feel free to make a new one

Standard ChinchillaOP

2023-06-12T08:09:34.000Z

Okay no issues

King Rail

2023-06-15T18:34:32.000Z

Did you find a fix for the headers bug? I am experiencing the same thing.

joulev

2023-06-16T01:05:47.000Z

You have to return a response

Either return a Response or return a NextResponse

King Rail

2023-06-16T06:03:42.000Z

I do that

But for some reason still get the error

joulev

2023-06-16T06:04:19.000Z

well you need to show some code

with this much info i obviously cannot say anything

King Rail

2023-06-16T06:09:43.000Z

Of course not, was just wondering if you had heard something.
This is my code to return a response:

return NextResponse.json(
        { products: allProducts },
        {
          status: 200,
          headers: {
            "content-type": "application/json",
          },
        }
      )

allProducts is a array of stripe products.
I have tried playing around with different headers, removing them and so on.

joulev

2023-06-16T06:12:08.000Z

well, this works for me normally

you must have a branch of code (e.g. an if/else, a try/catch) where the function terminates without a response

you can add the return type e.g. export function GET(): Response to ensure ts tells you where you forget to return the said response

King Rail

2023-06-16T06:13:15.000Z

Maybe, i am moving the api from an express js api to a nextjs api route. Everything is tested and works in the expressjs api, just need to change out the parts for the nextjs api.
How do you fetch the api?

joulev

2023-06-16T06:13:37.000Z

the fetch isn't important, you fetch it like any other apis

King Rail

2023-06-16T06:13:42.000Z

Okay

Well i am going to take a look at the route. Thank you!

You were right, i had a poorly writting try catch block. I am not sure why it worked fine in express tho. Thank you again!

joulev

2023-06-16T06:18:45.000Z

express most likely returns a default 200? response implicitly in that case

i would love nextjs to do that as well, but at the moment nextjs penalises all unreturned functions with this weird error so what to do

King Rail

2023-06-16T06:23:25.000Z

If the error was better explained it is probably fine that they do it this way. Makes people check their code through again i guess.

joulev

2023-06-16T06:33:46.000Z

yeah. i'm personally fine with both ways, but they absolutely need to get a better error message here at least