Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to read request body Next.js #26667

Closed
David200337 opened this issue Oct 31, 2024 · 5 comments · Fixed by #26882
Closed

Unable to read request body Next.js #26667

David200337 opened this issue Oct 31, 2024 · 5 comments · Fixed by #26882
Labels
bug Something isn't working correctly nextjs Issue relating to Next.js

Comments

@David200337
Copy link

David200337 commented Oct 31, 2024

Hey everyone! 👋

When experimenting with Next.js and Deno 2.0, I stumbled upon a strange issue that I couldn't quite figure out…

I've created a small Next.js project with a basic route file. In this file, I added both GET and POST methods with dummy responses. Although the GET endpoint works perfectly, when I send a POST request with a standard JSON body, I consistently receive an "Invalid JSON parsing error."

The Request

Here's what the request looks like:
image

Code

My app/api/users/route.tsx looks as follows:

import { NextRequest, NextResponse } from "next/server";

export function GET(request: NextRequest) {
    return NextResponse.json({ name: "John Doe" });
}

export async function POST(request: NextRequest) {
    try {
        const body = await request.json(); // Error seems to occur here

        return NextResponse.json(body);
    } catch (error) {
        console.error("Error parsing JSON:", error);
         return NextResponse.json({ error: "Invalid JSON" }, { status: 400 });
    }
}

Error

Executing this request leads to the following error:

Error parsing JSON: SyntaxError: "[object Object]" is not valid JSON
    at parse (<anonymous>)
    at packageData (ext:deno_fetch/22_body.js:402:14)
    at consumeBody (ext:deno_fetch/22_body.js:260:12)
    at eventLoopTick (ext:core/01_core.js:164:35)
    at async POST (webpack-internal:///(rsc)/./app/api/users/route.tsx, <anonymous>:15:22)
    at async AppRouteRouteModule.do (file:///home/dcwva/Dev/next-app/node_modules/.deno/next@15.0.1/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:10:32801)
 POST /api/users 400 in 368ms

Steps to reproduce

  1. Create a standard Next.js project through the Deno CLI.
  2. Add an api/users/route.tsx file.
  3. Copy the content of the route file as shown above into the created file.
  4. Run the project in dev mode using the deno task dev command.
  5. Send a POST request to the api/users endpoint with the JSON body shown above.

Versions

  • Deno: 2.0.4
  • Next.js: 15.0.1 (version 15.0.2 doesn’t seem to work at all)

The issue only seems to appear when running the Next.js server through Deno; running it through Node.js works just fine.

Is there something I’m missing here, or could this be a potential bug within the Deno framework?
Thank you so much in advance!

@nathanwhit nathanwhit added bug Something isn't working correctly nextjs Issue relating to Next.js labels Oct 31, 2024
@VMinB12
Copy link

VMinB12 commented Nov 3, 2024

Encountered a similar error when trying to run this CopilotKit example..

@icedman
Copy link

icedman commented Nov 6, 2024

Means deno doesn't yet support nextjs after all.

@bartlomieju
Copy link
Member

Means deno doesn't yet support nextjs after all.

That's not true. This is a recent change in latest Next.js version that uses a fetch API overload that is not spec compliant.

Other runtimes like workerd are facing similar problems (whatwg/fetch#1291 (comment)).

We are working on a solution that we will roll out in a few days.

@icedman
Copy link

icedman commented Nov 6, 2024

Yup. nextjs thing. I saw this workaround from another project. Running fastify with nextjs. Works for me so far.

nextauthjs/next-auth#11390

fastify.all('*', {
      // nextjs does its own POST body parsing, must run before fastify
      onRequest: async (req, res, next) => {
        res.hijack();
        try {
          await handle(req.raw, res.raw);
        } catch (err) {
          console.error('Error in', req.url, err);
          res.statusCode = 500;
          res.raw.end('Internal server error');
        }
        next();
      },
      handler: () => {},
    });

@HerrTuring
Copy link

HerrTuring commented Nov 7, 2024

Yup. nextjs thing. I saw this workaround from another project. Running fastify with nextjs. Works for me so far.

nextauthjs/next-auth#11390

fastify.all('*', {
      // nextjs does its own POST body parsing, must run before fastify
      onRequest: async (req, res, next) => {
        res.hijack();
        try {
          await handle(req.raw, res.raw);
        } catch (err) {
          console.error('Error in', req.url, err);
          res.statusCode = 500;
          res.raw.end('Internal server error');
        }
        next();
      },
      handler: () => {},
    });

Would you kindly explain how someone unfamiliar with fastify would implement this solution to solve the problem with next-auth?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working correctly nextjs Issue relating to Next.js
Projects
None yet
Development

Successfully merging a pull request may close this issue.

6 participants