controller[kState].transformAlgorithm is not a function

[J4v4Scr1pt]

Summary

[TypeError: controller[kState].transformAlgorithm is not a function] {
digest: '267856594'
}

I know you want an reproduction on the issue, but this issue is very specific and as it seems not reproduceable locally. Otherwise I would love to provide one!

It seems that more people have this issue and have a hard time tracking down the cause of it. You can read a fairly new thread here. It also seems that this have been there for a while because #68319 thread opened last summer with the same issue. There are more threads about this on StackOverflow etc.

We run an NextJs application (all latest and greatest) in standalone mode in an K8S environment as state above. From time to time this error just shows up. Tried different node versions and going through the code base several times but nothing seems out of order.

I'm unsure how affected our customers are because I don't know when this error fires off, but it's very annoying to see this popping up and a bit scary to not understand if it affects customers.

Help solving this would very much be appreciated.

Operating System:
 Linux
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.15.1
Relevant Packages:
  next: 15.1.7 // Latest available version is detected (15.1.7).
  eslint-config-next: 15.1.7
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.7.3
Next.js Config:
  output: standalone
Hosting Environment:
  Kubernetes,
  Docker Container node:22-alpine

Additional information

No response

Example

No response

[J4v4Scr1pt]

We have a lot of logs on this in DataDog, is there really no one that has an idea on where to start looking in to this?
I can't reproduce this locally and there no indicator when it happen. I would really really appreciate help on this because this issue affects many of our customers it seems from reading the logs.

[stefanraath3]

Hey, Im also experiencing this issue. it's super weird because in other branches of my projects it doesn't show up.
⨯ [TypeError: controller[kState].transformAlgorithm is not a function] { digest: '1014485352' }

Operating System: macOS Binaries: Node: 20.18.0 (Current system) npm: 10.8.2 (Current system) pnpm: 9.12.2 (Current system) Relevant Packages: next: 15.1.4 react: 19.0.0 react-dom: 19.0.0 typescript: 5.7.3 Next.js Config: images: Configured for Clerk Hosting Environment: Vercel

[J4v4Scr1pt]

Yes suuper weird, I understand it has something to do with streaming from Node.
Have tried to reproduce this in many ways but nothing. Very very hard to pin point where and when it happens.
It would be great to have some logging that gave some more context.

[stefanraath3]

I think I managed to find a way to reproduce it. this is specific to my situation where I accidentally used a "#" as a placeholder for a prop that should be a url. This was a very narrow situation that I found with the Avatar component from shadcn. First nav-user.tsx in my sidebar, then Avatar inside that. so idk how well it generalizes to other scenarios and how node streaming works. perhaps the combo of server component doing async + client component + something. maybe there is something in here that could give you some ideas on how to replicate it for your case.

I asked chatgpt to write something up:

Below is the scenario that clearly shows how a simple “function call + avatar prop set to "#"” combination can trigger the cryptic streaming error.

---

Minimal Example

Folder Structure

app/
  test/
    layout.tsx    <-- Our test layout
    page.tsx
  components/ui/
    avatar.tsx    <-- Shadcn Avatar component

app/test/layout.tsx

Scenario A (Error does occur)

"use server";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

// Mock server function that simulates an async fetch.
async function mockFetchUserRole() {
  // Delay to mimic a real DB/API call
  await new Promise((resolve) => setTimeout(resolve, 500));
  return "admin";
}

export default async function TestLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Trigger the async call. We get some data or role from the server side.
  const userRole = await mockFetchUserRole();

  // The culprit: using src="#"
  const avatarUser = {
    name: "User",
    email: "user@example.com",
    avatar: "#",
    role: userRole, // This is used or displayed
  };

  return (
    <div className="flex min-h-screen items-center justify-center">
      <Avatar className="h-8 w-8 rounded-lg">
        <AvatarImage src={avatarUser.avatar} alt={avatarUser.name} />
        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
      </Avatar>
      {children}
    </div>
  );
}

With this code, once you navigate to the /test route or cause a partial reload, the server logs may start showing:

[TypeError: controller[kState].transformAlgorithm is not a function]
{ digest: 'XXXXXXXXXX' }

sometimes repeatedly on further interactions.

---

Scenario B (Error does NOT occur)

"use server";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";

// Notice: no mockFetchUserRole() call
export default async function TestLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // Hard-code a string instead of calling an async function
  const userRole = "admin";

  const avatarUser = {
    name: "User",
    email: "user@example.com",
    avatar: "#",
    role: userRole,
  };

  return (
    <div className="flex min-h-screen items-center justify-center">
      <Avatar className="h-8 w-8 rounded-lg">
        <AvatarImage src={avatarUser.avatar} alt={avatarUser.name} />
        <AvatarFallback className="rounded-lg">CN</AvatarFallback>
      </Avatar>
      {children}
    </div>
  );
}

In this variant, with no asynchronous function call, the error never shows up—even though <AvatarImage src="#" /> is still present.

---

How to Reproduce

1. Create a Next.js app (13+ or 15+), enable server components by default.
2. In app/test/layout.tsx, copy the “Scenario A” code snippet that:
   • Imports a shadcn/radix <Avatar> from a client component
   • Calls an async server function (like a mock DB or fetch) to get a variable
   • Passes "#" as the avatar source
3. Run npm run dev (or a production build on Node 20+).
4. Navigate to /test:
   • If the environment triggers partial streaming, you’ll begin seeing:

     [TypeError: controller[kState].transformAlgorithm is not a function]
     { digest: '...' }
     

     in terminal logs.

If you remove that async function call in the layout or if you remove/replace "#" with a real URL or empty string, the error disappears.

---

Key Takeaways

1. The combination of a server component layout that does an async fetch plus an <AvatarImage src="#" /> in a client component triggers Next.js’s streaming pipeline to produce [TypeError: controller[kState].transformAlgorithm is not a function].
2. Using "#" in <img> or <AvatarImage> is unusual, but apparently it completely breaks SSR streaming in some circumstances.
3. Removing any of these elements solves it:
   • No async server call (no partial stream).
   • Replacing "#" with a real or empty URL.
   • Putting <AvatarImage> behind a conditional that never actually renders it.
4. This strongly suggests that Next’s streaming/hydration logic or Node’s transform has trouble with a hash-only image source specifically when server data must be fetched and rendered.

From this minimal test, we see that seemingly innocuous placeholders like "#" can blow up Next’s SSR streaming if combined with server-side data fetching.

[J4v4Scr1pt]

Thank you so much for the detailed answer! 🙌

I don't use shadcn but HeroUI. Will look into the Avtar usage.

It's a tricky error and will probably be different for most. But answers like yours could help others. Thanks again!

[khashayarsw]

"I'm experiencing the same issue: TypeError: controller[kState].transformAlgorithm is not a function in my Next.js project. Any updates or solutions?"

[J4v4Scr1pt]

No updates and their will probably never be a silverbullet for this error. Maybe.. maybe Vercel could do something in the future with the logging to easier find why. But this error will probably rarely be the same for users.
But having a thread like this could help others. I will also write my findings if I ever pinpoint it

[roberttriggs]

I had this issue intermittently on my self hosted NextJS 15 app which uses Nginx as a reverse proxy. In my case the issue seems to be around headers / buffers growing to the point where they were getting truncated by Nginx which caused Node to have problems and throw the Kstate error. At the same time could see buffer overrun errors in Nginx "upstream sent too big header whil e reading response header" so I added the following into my server block in the Nginx conf to increase the proxy buffers:

proxy_buffer_size 128k;  # Increase the buffer size
proxy_buffers 4 256k;     # Increase the number of buffers and their size
proxy_busy_buffers_size 256k;  # Increase the buffer size when the server is busy
proxy_max_temp_file_size 256k; # Allow larger temp files in case of large headers

After adding this the issue is totally fixed for me (so far!)

[J4v4Scr1pt]

We also use the Nginx and I also get the heders ovwerflow error from time to time. Great suggestions, will look into this asap!

[fahimrayhan]

In my case, the error is produced from these two legacy image parameters. If I remove these parameters, then the error is gone.

[khashayarsw]

I suspect that using deprecated Image APIs might be causing the TypeError: controller[kState].transformAlgorithm is not a function error. However, I am not using any deprecated APIs in my code. I have also moved image rendering to the client side only, but I am still encountering this error in the server logs.