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

[aleksFedotov]

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

[mpurdon]

I am also experiencing this issue in version 13.2.4

Operating System:
      Platform: osx
      Arch: M1 Max
      Version: MacOS Monterey 12.6
    Binaries:
      Node: v18.0.0
      npm: 9.2.0
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.2.4
      eslint-config-next: 13.2.4
      react: 18.2.0
      react-dom: 18.2.0

[joacub]

may be related:
#48542

[Tvlasev]

I have the same problem when using NextResponse.json(). Also I am getting a 500 server error status code when I am trying to make a post request to a mongodb database and yet the data is successfully created in the db

[pago]

I ran into this issue while updating one of our apps to use App Router. The source of the problem in our case turned out to be that we explicitly disabled experimental-fetch.

# before
NODE_OPTIONS='--no-experimental-fetch' next dev

# after
next dev

After removing the --no-experimental-fetch flag, everything worked as expected.

[prashantchothani]

I am facing the same issue even in next dev. I am getting the following error:

TypeError: next_dist_server_web_exports_next_response__WEBPACK_IMPORTED_MODULE_2__.default.json is not a constructor
at GET (webpack-internal:///(sc_server)/./app/api/cms/masters/meals/route.js:38:12)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:244:37)

[Aoichaan0513]

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.

[alexshenker]

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

[hj007jacky]

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

[balazsorban44]

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: nodejs/node#43197 (comment)

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

[machineghost]

Please re-open this issue, as updating to Node does not resolve it:

$ node --version
v20.3.0

$ npm run dev

... try to hit API ...

- error TypeError: next_dist_server_web_exports_next_response__WEBPACK_IMPORTED_MODULE_0__.json is not a function