TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed #55027

msoyka · 2023-09-05T21:52:50Z

msoyka
Sep 5, 2023

I am quickly throwing together a POC using Next.js new app router, and am making sequential api request in the layout file, and am getting the error TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed. Is this something to do with next.js cacheing? Curious if anyone has seen this error before and where I might start my efforts to fix.

Code Snippet:

export default async function RootLayout({children}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession(nextAuthOptions);

  const userActiveCart = await getUserActiveCart({
    customerId: Number(session?.customerId),
    accessToken: session?.accessToken || "",
  });

  const featureFlags = await getFeatureFlags({
    accessToken: session?.accessToken || "",
    storeId: userActiveCart?.storeId || "",
  });

  return (
    <html lang="en">
      <body className={inter.className}>
            <pre>
              {JSON.stringify(userActiveCart, null, 2)}
              <br />
              <br />
              {JSON.stringify(session, null, 2)}
              <br />
              <br />
              {JSON.stringify(featureFlags, null, 2)}
            </pre>
      </body>
    </html>
  );
}

devjiwonchoi · 2023-09-05T23:21:34Z

devjiwonchoi
Sep 5, 2023
Maintainer

Assuming that {children,} is a typo, the overall code seems alright.

Can you provide a repro?

1 reply

msoyka Sep 6, 2023
Author

That is correct. Simplified the layout before posting it here. Removed it for clarity.

icyJoseph · 2023-09-06T08:07:54Z

icyJoseph
Sep 6, 2023
Collaborator

What Node.js version have you got?

This looks like a stale stream object that's being reused. Like for example, if you'd do:

const res = await fetch(/* something */)
cache.add('foo', res)

And then called res.json() twice, thought that'd yield another error.

It is not really easy to see why this would happen on your snippet though.

2 replies

msoyka Sep 6, 2023
Author

I am using node v18.16.0, but each res.json() is encapsulated within its own function so don't think that is happening, but is always nice to know that calling .json twice would create this error. Will verify that this is indeed not happening.

icyJoseph Sep 7, 2023
Collaborator

It'd be a different error message AFAIK, but sounds like a somewhat similar issue

statusunknown418 · 2023-09-06T19:09:59Z

statusunknown418
Sep 6, 2023

for me it just happens if I'm on the dev server and reload the page really fast or do a hard reload (cmd + R)

2 replies

msoyka Sep 6, 2023
Author

This is interesting. I am doing the hard reload a lot at the moment as I am testing the caching functionality of the requests as well as my sessions that are being set with Next-Auth. Glad, not glad, that this is also happening to others from just basic dev server reloads. Will have to verify with a production build I imagine.

statusunknown418 Sep 6, 2023

yea, it kinda seems weird to have this errors anyway

msoyka · 2023-09-06T19:32:29Z

msoyka
Sep 6, 2023
Author

Trying to get together a simplified repo together in hopes it might help give better context to answering the question. Appreciate all the quick responses! 👍

0 replies

asp3 · 2023-09-07T11:10:38Z

asp3
Sep 7, 2023

having the same issue on production build logs, not sure if its causing our crashes though.

1 reply

statusunknown418 Sep 8, 2023

I think it's not the reason for app crashes but more like warnings

msoyka · 2023-09-07T16:47:22Z

msoyka
Sep 7, 2023
Author

I can now reproduce it everytime while running next.js app with dev.

Reproduce Error:

Add Suspense to RootLayout.
Run request from GlobalHeader server-component
Get Error after next.js message Fast Refresh had to perform a full reload..

Ways To Stop The Error:

Removing the Suspense within the root layout, but keeping the request in GlobalHeader
Keep Suspense, but remove request from GlobalHeader

// `layout.tsx`

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { getServerSession } from "next-auth/next";
import { Suspense } from "react";

import StyledComponentsRegistry from "@src/lib/StyledComponentsRegistry";
import { nextAuthOptions } from "@api/auth/[...nextauth]/options";
import NextAuthHandler from "@src/lib/next-auth/NextAuthHandler";
import { GlobalHeader } from "@src/components/GlobalHeader";

import Loading from "./loading";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Next.js App",
  description: "App Created with next.js",
};

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getServerSession(nextAuthOptions);

  return (
    <html lang="en">
      <body className={inter.className}>
        <main>
          <Suspense fallback={<Loading />}>
            <NextAuthHandler session={session} />
            <StyledComponentsRegistry>
              <GlobalHeader />
              {children}
            </StyledComponentsRegistry>
          </Suspense>
        </main>
      </body>
    </html>
  );
}

// Global Header Component `GlobalHeader.tsx`

import "server-only";

import { getServerSession } from "next-auth/next";
import { nextAuthOptions } from "@api/auth/[...nextauth]/options";
import { getUserActiveCart } from "@src/lib/services/getUserActiveCart";
import { Login } from "@src/components/Login";

// import styles from "./GlobalHeader.module.css";

export const GlobalHeader = async () => {
  const session = await getServerSession(nextAuthOptions);

// When i run this request within Suspense, the error is thrown
  const userActiveCart = await getUserActiveCart({
    customerId: Number(session?.customerId),
    accessToken: session?.accessToken || "",
  });

// When i use static data, rather than the userActiveCart request above, I dont get the error.
  // const userActiveCart = {
  //   storeId: null,
  //   activeCartId: null,
  // };

  return (
    <div>
      <Login session={session} />
      <div>
        <ul>
          <li> Store ID: {userActiveCart?.storeId || "n/a"}</li>
          <li>Active Cart ID: {userActiveCart?.activeCartId || "n/a"}</li>
        </ul>
      </div>
      <div>
        <ul>
          <li>User: {session?.user?.name || "Guest"}</li>
          <li>Customer ID: {session?.customerId || "N/A"}</li>
          <li>Customer UUID: {session?.customerUuid || "N/A"}</li>
          <li>Email: {session?.user?.email || "N/A"}</li>
          <li>isAuthenticated: {`${!!session}`}</li>
        </ul>
      </div>
    </div>
  );
};

// Data Request

import "server-only";

interface GetUserDetailsProps {
  customerId: number;
  accessToken: string;
}

interface UserActiveCart {
  activeCartId: string | null;
  storeId: string | null;
}

function wait(milliseconds: number) {
  return new Promise((resolve) => setTimeout(resolve, milliseconds));
}

export async function getUserActiveCart({
  customerId,
  accessToken,
}: GetUserDetailsProps) {
  try {
    const result = await fetch("[graphqlEndpoint]", {
      method: "POST",
      cache: "no-cache",
      headers: {
        "Content-Type": "application/json",
        Authorization: `Bearer ${accessToken}`,
      },
      body: JSON.stringify({
        query: `[query string]`,
        variables: {
          customerId,
        },
      }),
    });

    const { data } = await result.json();
    
    await wait(5000);

    const cart = data?.carts?.[0];
    return {
      activeCartId: cart?.cartId || null,
      storeId: cart?.storeId || null,
    } as UserActiveCart;
  } catch (error) {
    console.log("Error getUserActiveCart: ", error);
  }
}

4 replies

msoyka Sep 7, 2023
Author

Getting an additional error as well.

- error Error: The render was aborted by the server without a reason.
- error TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed

msoyka Sep 7, 2023
Author

Another thing to callout is the await wait(5000) in the fetch. Trying to simulate longer requests to validate suspense fallbacks.

msoyka Sep 7, 2023
Author

Also seems to happen when i reload to quickly. Even in production build.

sui-kee Sep 19, 2023

thanks. it work for me

steamwings · 2023-09-08T12:39:15Z

steamwings
Sep 8, 2023

I only see this when on next 13.4.19. I tried downgrading to 13.4.10 and the error does not appear. (Re-upgraded to 13.4.19 to double check and it appeared again.) Haven't tried other minor versions.

5 replies

msoyka Sep 8, 2023
Author

Same for me. Downgrading to 13.4.10 removed the error. Does seem like the logging changed from that time since I am now seeing detailed request caching info, so curious if there error is still there, just being hidden from the console.

-  ┌ GET / 200 in 5681ms
      │
        ├──── GET https://dev../auth/realms/customer/pr.. 200 in 123ms (cache: MISS)
            │
             └── 1 level ── POST https://api.dev.cloud/graphql 200 in 179ms (cache: MISS)

alexvobo Sep 14, 2023

Running into the same issue (app router + next-auth). Downgrading removed the error for me

thexpand Sep 15, 2023

I'm running into the same issue. I'm not using next-auth, but using @auth0/nextjs-auth0. I don't know if it's related to auth at all.

tem-ctrl Sep 18, 2023

Same error here whereas not using any special package. I think this issue is a bug in the latest version on NextJs. I'm using v. 4.13.19.

j3rryl Oct 10, 2023

I was using version 13.4.19. Downgrading to 13.4.10 seems to have removed it as well. Maybe it's the error being hidden from the logs. But getting same results as @msoyka . Any ideas to the cause, or potential fix?

┌ GET /dashboard/movies?_rsc=a3ulp 200 in 1289ms
│
└──── GET http://127.0.0.1:3000/api/movies 200 in 236ms (cache: MISS)
┌ GET /dashboard/movies?_rsc=a3ulp 200 in 1362ms
│
└──── GET http://127.0.0.1:3000/api/movies 200 in 299ms (cache: MISS)

dstarosta · 2023-09-15T20:35:32Z

dstarosta
Sep 15, 2023

Same issue. Reverting to 13.4.12 fixes the problem.

1 reply

adarsh-drishya Sep 17, 2023

i am worried if its worth to move this to prod right now

toonverbeek · 2023-09-16T08:11:05Z

toonverbeek
Sep 16, 2023

Same issue here. I'm not using any <Suspense /> boundaries in my app, but I am doing multiple fetches in the components where this is happening. Can confirm that downgrading removes the error.

0 replies

douglasrcjames · 2023-09-17T23:14:03Z

douglasrcjames
Sep 17, 2023

Running into this same issue on "next": "^13.4.19", but not worth downgrading since I do not see any issues with my app.

I am also using "next-auth": "^4.23.1", which seems a few others are as well, but probably not directly related.

0 replies

vedantroy · 2023-09-18T05:45:37Z

vedantroy
Sep 18, 2023

I'm getting this error as well, and it is crashing my production server:

TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed
    at new NodeError (node:internal/errors:405:5)
    at ReadableByteStreamController.enqueue (node:internal/webstreams/readablestream:1152:13)
    at n (/app/.next/server/chunks/892.js:38426:141)
    at R (/app/.next/server/chunks/892.js:39206:90)
    at mb (/app/.next/server/chunks/892.js:39195:35)
    at Timeout._onTimeout (/app/.next/server/chunks/892.js:39001:16)
    at listOnTimeout (node:internal/timers:569:17)
    at process.processTimers (node:internal/timers:512:7) {
  code: 'ERR_INVALID_STATE'
}
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at async invokeRequest (/app/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async invokeRender (/app/node_modules/next/dist/server/lib/router-server.js:254:29)
    at async handleRequest (/app/node_modules/next/dist/server/lib/router-server.js:447:24)
    at async requestHandler (/app/node_modules/next/dist/server/lib/router-server.js:464:13)
    at async Server.<anonymous> (/app/node_modules/next/dist/server/lib/start-server.js:117:13) {
  cause: SocketError: other side closed
      at Socket.onSocketEnd (/app/node_modules/next/dist/compiled/undici/index.js:1:63301)
      at Socket.emit (node:events:526:35)
      at endReadableNT (node:internal/streams/readable:1359:12)
      at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
    code: 'UND_ERR_SOCKET',
    socket: {
      localAddress: '127.0.0.1',
      localPort: 37256,
      remoteAddress: '127.0.0.1',
      remotePort: 36341,
      remoteFamily: 'IPv4',
      timeout: undefined,
      bytesWritten: 2315,
      bytesRead: 0
    }
  }
}
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at async invokeRequest (/app/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async handleRoute (/app/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:283:45)
    at async resolveRoutes (/app/node_modules/next/dist/server/lib/router-utils/resolve-routes.js:483:28)
    at async handleRequest (/app/node_modules/next/dist/server/lib/router-server.js:320:102)
    at async requestHandler (/app/node_modules/next/dist/server/lib/router-server.js:464:13)
    at async Server.<anonymous> (/app/node_modules/next/dist/server/lib/start-server.js:117:13) {
  cause: Error: read ECONNRESET
      at TCP.onStreamRead (node:internal/stream_base_commons:217:20) {
    errno: -104,
    code: 'ECONNRESET',
    syscall: 'read'
  }
}

3 replies

dstarosta Sep 19, 2023

It looks like newer versions of Next.js are using "undici" instead of "Node fetch" which is what seems to be causing the problem.

icyJoseph Sep 19, 2023
Collaborator

@dstarosta that has been the case since last year. Rather, Node.js based its so-called native fetch on undici

icyJoseph Sep 19, 2023
Collaborator

@vedantroy that looks like the custom protocol used by Next.js to talk to workers. It typically uses a random port on your system to do that.

It might just be that your system doesn't allow next.js to open ports. Or that something is failing on that communication channel.

#51691 (comment)

icyJoseph · 2023-09-19T07:09:37Z

icyJoseph
Sep 19, 2023
Collaborator

Could people please answer these questions:

Node.js and Next.js versions
Repository that fails?

0 replies

willianrod · 2023-09-19T15:34:14Z

willianrod
Sep 19, 2023

I'm having the same errors and I'm not using next-auth:

Node: v18.16.0
Next: v13.4.19
OS: MacOS Ventura 13.4.1 (c)
Chip: Apple M2 Pro

error TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed

TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11457:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async invokeRequest (/path/to/app/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:17:12)
    at async invokeRender (/path/to/app/node_modules/next/dist/server/lib/router-server.js:254:29)
    at async handleRequest (/path/to/app/node_modules/next/dist/server/lib/router-server.js:447:24)
    at async requestHandler (/path/to/app/node_modules/next/dist/server/lib/router-server.js:464:13)
    at async Server.<anonymous> (/path/to/app/node_modules/next/dist/server/lib/start-server.js:117:13) {
  cause: Error: connect ECONNREFUSED ::1:62069
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1494:16) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 62069
  }
}

1 reply

icyJoseph Sep 19, 2023
Collaborator

Mmm I wonder if it has to do with the IPv6 format... or if your system is somehow not allowing Node.js to open ports beyond a certain range?

manovotny · 2023-09-19T18:03:00Z

manovotny
Sep 19, 2023

We just released Next.js 13.5, which contains over 438 bugs patched since 13.4.

Can anyone please ensure you're using 13.5.x and try again?

And if you're still experiencing issues, please answer the following:

Node.js version
Next.js version
OS version
Runtime version (Edge or Node.js)
Link to a repository that has a minimal failing reproduction

Thank you! 🙏

9 replies

Jonnotie Sep 28, 2023

Installed 13.5.3 and it's still happening here

msalahz Oct 3, 2023

Same here, I can reproduce the issue on v13.5.3

Samueljh1 Oct 5, 2023

Same issue here on v13.5.3

msalahz Oct 5, 2023

Can't see it anymore on v13.5.4

sunaryohadi Oct 17, 2023

seem re-appear again in v.13.5.5

parabuzzle · 2023-09-19T20:19:31Z

parabuzzle
Sep 19, 2023

I am seeing this same error that @willianrod mentioned quite a bit using yarn dev with turbo repo.. I have seen this happen immediately after getting a memory exhaustion error. and when I run free I have very little memory left. I can't hit any of the running application in my turbo repo after this happens without stopping and restarting the dev stack.

The next time it happens I'll get the data, but it seems to be a leak somewhere in the server.

0 replies

kitchenbeats · 2023-09-21T19:42:58Z

kitchenbeats
Sep 21, 2023

Im getting the same error, from v13.4.19 and up to the latest release. As mentioned, it happens on a reload.

0 replies

ccxdev · 2023-09-22T07:53:37Z

ccxdev
Sep 22, 2023

Should be fixed on React side

Related: #55608

0 replies

nnennajohn · 2023-10-13T01:33:39Z

nnennajohn
Oct 13, 2023

Same issue here. Using
Next: v13.5.5-canary.8
Node: v18.17.1
OS: MacOS Ventura 13.4.1 (c)
Chip: Apple M2 Pro

Using supabase auth:

0 replies

rabin999 · 2024-03-28T17:43:09Z

rabin999
Mar 28, 2024

Any Update On this ?

0 replies

Driesigner · 2024-05-15T15:44:41Z

Driesigner
May 15, 2024

I was getting this error with next 14.1.3 using app-router. I was getting this error when using the useTranslations hook from next-intl in an async component. Replacing the hook by the server-side await getTranslations function fixed the issue.

Before solving (error occurs):

export const ParagraphCaseStudy: FC<Props> = async ({ paragraph }) => {
  const t = useTranslations();
}

Solution:

export const ParagraphCaseStudy: FC<Props> = async ({ paragraph }) => {
  const t = await getTranslations();
}

Not sure if this helps, but it seems it might have something to do with doing client stuff on server-components?

4 replies

ScreamZ Jun 26, 2024

Damn the log is so bad about it! I'm facing it a lot of time and forget about it.

amannn Jul 11, 2024

Thanks for sharing your solution @Driesigner!

Note that the React ESLint plugin will warn for using hooks in async components in the future, hopefully that should help people to avoid running into this (see #55027 (reply in thread)).

kisstamasj Sep 4, 2024

i can agree with you, i had the same problem, and it caused by the next-intl library, when i used useTranslations hook inside an async server component.

clemenshimmer Oct 17, 2024

Had the exact same issue with getLocale and useLocale in a server component.

maslowivan · 2024-07-01T08:37:48Z

maslowivan
Jul 1, 2024

14.2.4 still happening

3 replies

awbranch Jul 4, 2024

14.2.4 still happening

PutawanDE Jul 10, 2024

It's still happening to me too on production. It was reported by Sentry. Should we open an issue?

ayhan02 Jul 25, 2024

When I switched to 14.3.0-canary.59, I no longer had the error

ncostaramos · 2024-07-10T14:51:38Z

ncostaramos
Jul 10, 2024

If it helps anyone, in usecase, after spending 3 days debugging, found a not-found.tsx file calling out next-intl useLocale() function.

So, I was using useLocale() instead of the await getLocale() for a server component.

This caused a suspended thenable in dev and, strangely, when building the application no errors were found. After built and running, a 500 internal error appeared with "Invalid state: ReadableStream is already closed".

The issue was an error in code but the debugging was quite painful.

2 replies

ScreamZ Jul 10, 2024

Already reported to the owner : amannn/next-intl#1150 @amannn see people lose much time ;'(

amannn Jul 11, 2024

@ScreamZ I've checked again, and eslint-plugin-react-hooks contains the warning to disallow hooks in async functions in the latest release candidate versions:

Hopefully the React 19 RC progresses in a timely manner for people to stop bumping into this!

Christophvh · 2024-09-25T09:23:01Z

Christophvh
Sep 25, 2024

Same Error on "14.2.13"

0 replies

ollebergkvist · 2024-10-23T16:26:10Z

ollebergkvist
Oct 23, 2024

I can confirm that this is still happening in: 15.0.1 as well

0 replies

TypeError [ERR_INVALID_STATE]: Invalid state: ReadableStream is already closed #55027

Uh oh!

Uh oh!

Replies: 24 comments · 38 replies

Uh oh!

devjiwonchoi Sep 5, 2023 Maintainer

Uh oh!

Uh oh!

msoyka Sep 6, 2023 Author

Uh oh!

icyJoseph Sep 6, 2023 Collaborator

Uh oh!

msoyka Sep 6, 2023 Author

Uh oh!

icyJoseph Sep 7, 2023 Collaborator

Uh oh!

Uh oh!

msoyka Sep 6, 2023 Author

Uh oh!

Uh oh!

msoyka Sep 6, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msoyka Sep 7, 2023 Author

Uh oh!

msoyka Sep 7, 2023 Author

Uh oh!

msoyka Sep 7, 2023 Author

Uh oh!

msoyka Sep 7, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msoyka Sep 8, 2023 Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Replies: 24 comments 38 replies

devjiwonchoi
Sep 5, 2023
Maintainer

msoyka Sep 6, 2023
Author

icyJoseph
Sep 6, 2023
Collaborator

msoyka Sep 6, 2023
Author

icyJoseph Sep 7, 2023
Collaborator

msoyka Sep 6, 2023
Author

msoyka
Sep 6, 2023
Author

msoyka
Sep 7, 2023
Author

msoyka Sep 7, 2023
Author

msoyka Sep 7, 2023
Author

msoyka Sep 7, 2023
Author

msoyka Sep 8, 2023
Author