next.js: The usage of NextResponse.json() function leads to the error TypeError: Response.json is not a function. in dev mode

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home Single Language
    Binaries:
      Node: 18.2.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.3.1-canary.12
      eslint-config-next: 13.3.0
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true), Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

https://github.com/aleksFedotov/next-js-error

To Reproduce

npm install npm run dev

Describe the Bug

When using NextResponse.json() in development mode, an error occurs. error - TypeError: Response.json is not a function at Function.json (webpack-internal:///(sc_server)/./node_modules/next/dist/server/web/spec-extension/response.js:67:35) at GET (webpack-internal:///(sc_server)/./app/api/hello/route.ts:8:95) at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:232:24) at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:108:36) at NoopContextManager.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30) at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58) at NoopTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:953:34) at ProxyTracer.startActiveSpan (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:993:36) at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:97:107) at NoopContextManager.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:360:30) at ContextAPI.with (webpack-internal:///(sc_server)/./node_modules/next/dist/compiled/@opentelemetry/api/index.js:30:58) at NextTracerImpl.trace (webpack-internal:///(sc_server)/./node_modules/next/dist/server/lib/trace/tracer.js:97:32) at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:227:49) at AsyncLocalStorage.run (node:async_hooks:327:14) at Object.wrap (webpack-internal:///(sc_server)/./node_modules/next/dist/server/async-storage/static-generation-async-storage-wrapper.js:37:24) at eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:181:93) at AsyncLocalStorage.run (node:async_hooks:327:14) at Object.wrap (webpack-internal:///(sc_server)/./node_modules/next/dist/server/async-storage/request-async-storage-wrapper.js:64:24) at AppRouteRouteModule.execute (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:180:87) at AppRouteRouteModule.handle (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:272:41) at RouteHandlerManager.handle (C:\Coding\practice\error\node_modules\next\dist\server\future\route-handler-managers\route-handler-manager.js:28:29) at doRender (C:\Coding\practice\error\node_modules\next\dist\server\base-server.js:919:58) at cacheEntry.responseCache.get.incrementalCache.incrementalCache (C:\Coding\practice\error\node_modules\next\dist\server\base-server.js:1130:34) at C:\Coding\practice\error\node_modules\next\dist\server\response-cache\index.js:96:42 at ResponseCache.get (C:\Coding\practice\error\node_modules\next\dist\server\response-cache\index.js:144:11) at DevServer.renderToResponseWithComponentsImpl (C:\Coding\practice\error\node_modules\next\dist\server\base-server.js:1049:53) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async DevServer.renderPageComponent (C:\Coding\practice\error\node_modules\next\dist\server\base-server.js:1270:24) at async DevServer.renderToResponseImpl (C:\Coding\practice\error\node_modules\next\dist\server\base-server.js:1301:32) at async DevServer.pipeImpl (C:\Coding\practice\error\node_modules\next\dist\server\base-server.js:619:25) at async Object.fn (C:\Coding\practice\error\node_modules\next\dist\server\next-server.js:1126:21) at async Router.execute (C:\Coding\practice\error\node_modules\next\dist\server\router.js:311:32) at async DevServer.runImpl (C:\Coding\practice\error\node_modules\next\dist\server\base-server.js:593:29) at async DevServer.run (C:\Coding\practice\error\node_modules\next\dist\server\dev\next-dev-server.js:922:20) at async DevServer.handleRequestImpl (C:\Coding\practice\error\node_modules\next\dist\server\base-server.js:528:20)

However, in production mode, there is no such error. Also, if you use this function on Linux instead of Windows 11, the error disappears.

Expected Behavior

Produce a response with the given JSON body.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

About this issue

Original URL
State: closed
Created a year ago
Comments: 28 (2 by maintainers)

Most upvoted comments

I initially had the same problem in my environment, but by upgrading the Node.js version from 18.0.0 to 18.16.0, the latest stable version, the error no longer occurred.

+14

Aoichaan0513 on May 5, 2023

Next.js relies on the runtime environment to provide the Response.json method.

Node.js 18.2 did not have this method yet, it was added in 18.3. See: https://github.com/nodejs/node/pull/43197#issuecomment-1136046865

You can upgrade your runtime environment to at least 18.3 and it should fix this issue.

balazsorban44 on May 25, 2023

use this: return new NextResponse( JSON.stringify({ success: false, message: ‘authentication failed’ }), { status: 401, headers: { ‘content-type’: ‘application/json’ } }, );

hj007jacky on May 10, 2023

I’m found the problem: it’s an import issue.

When I have this, I get the error:

import { NextResponse  } from 'next/server';

export async function GET(request) {
  return NextResponse.json({ success: true });
}

But when I change the import like so, it works:

import Server from 'next/server';

export async function GET(request) {
  return Server.NextResponse.json({ success: true });
}

So it appears that some sort of export-related issue causes this problem … for users like me, but not for other users (and I’m not sure what’s different about my environment).

P.S. If I import both, and log them side-by-side …

import Server, { NextResponse } from 'next/server';

console.log(Server.NextResponse, NextResponse);

They appear to be identical:

[class NextResponse extends Response] [class NextResponse extends Response]

… but again, Server.NextResponse works perfectly, while NextResponse (the direct named import) fails with the error.

machineghost on Jul 1, 2023

It’s not working for me in jest.

I have this function:

export function apiError(error: string, status?: number): NextResponse {
  if (!status) {
    status = 400;
  }
  return NextResponse.json({ error }, { status });
}

and this unit test:

describe("apiError", () => {
  it("returns a response with the provided error message and status code", () => {
    const error = "Test error";
    const status = 404;
    const response = apiError(error, status);

    expect(response.status).toBe(status);
    expect(response.body).toEqual(JSON.stringify({ error }));
  });

  it("returns a response with a default status code of 400 if none is provided", () => {
    const error = "Test error";
    const response = apiError(error);

    expect(response.status).toBe(400);
    expect(response.body).toEqual(JSON.stringify({ error }));
  });
});

The function is working correctly via npm run dev, but not via npm test. There I get TypeError: Response.json is not a function.

I tried node version 20.3.1 and v16.18.1. I’m on next.js 13.4.6.

My jest.config.mjs is pretty much the bare minimum as described in the docs:

import nextJest from 'next/jest.js'
 
const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})
 
// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const config = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
}
 
// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
export default createJestConfig(config)

jset.setup.js just imports import 'jest-fetch-mock'.

What am I doing wrong?

jonnylangefeld on Jun 22, 2023

I did manage to make things work with:

export async function GET() {
  return Response.json({ hi: 'mom' });
}

So it’s clearly a problem with NextResponse.

machineghost on Jun 12, 2023

Ran into this problem earlier today, updating my Node.js to 18.16.1 resolved the issue. I’d previously tried the import Server from 'next/server' solution above and that did not solve my issue.

This runtime env dependency (at least Node.js v 18.3) should be outlined further in the docs, IMO.

mathesond2 on Jul 13, 2023

I had this issue and none of the above fixes worked. Turns out I just needed to install jest-environment-node.

See here

reubendrummond on Jul 3, 2023

If anyone else comes here: I found what my issue was. It was the import 'jest-fetch-mock', which I needed on an earlier node version. During the debugging of this issue I then updated the node version to v20.3.1 but left import 'jest-fetch-mock' in the jest.setup.js file. However, that mock didn’t have the Response.json() function cause it’s not updated yet.

The solution was just to remove that import once I was on node v20.3.1 and now it works in both, jest and npm run dev 🥳

jonnylangefeld on Jun 22, 2023

I can confirm it’s working with node 20.3.1 and next 13.4.6.

asura6 on Jun 21, 2023

I’m getting this error while trying to implement NextJS’ own exmple:

export async function GET(request: Request) {
  return NextResponse.json({ hello: "Next.js" });
}

with Node v18.2.0 / Mac M1

alexshenker on May 7, 2023