ReferenceError: ReadableStream is not defined

[hblumberg]

Summary

Hello!

We're regularly seeing the following error in Sentry:

ReferenceError
ReadableStream is not defined

../node_modules/next/dist/client/app-index.js in response at line 111:11

   function useInitialServerResponse(cacheKey) {
       const response = rscCache.get(cacheKey);
       if (response) return response;
>>>    const readable = new ReadableStream({
           start (controller) {
               nextServerDataRegisterWriter(controller);
           }
       });

We know ReadableStream is not available on older browsers, but the Sentry reports show that supported browsers are running into this issue too.

We tried adding a polyfill in our top-level layout file:

import { ReadableStream } from 'web-streams-polyfill';

if (typeof globalThis.ReadableStream === 'undefined') {
  globalThis.ReadableStream = ReadableStream;
}

but it hasn't helped.

Can anyone provide guidance here? Thanks in advance!

Additional information

No response

Example

No response

[ebratanova]

@hblumberg did you find any way to fix this? Seeing this error in our monitoring quite a lot as well

[hblumberg]

Unfortunately we haven't found a way to fix this error, and we continue to see it in our logs.

[ebratanova]

Thanks for the reply :)
If it helps you, we've tried adding import 'web-streams-polyfill/polyfill' today not to root layout, but to a piece of code that we are injecting into client bundle like sentry does it: https://github.com/getsentry/sentry-javascript/blob/3fc12c67c52fbae6354deccad565192103ca30cc/packages/nextjs/src/config/webpack.ts#L371, and after releasing new version of our app to prod the error seems to be gone

[hblumberg]

Ooh we'll try that out -- thank you so much!

[jlev]

Any chance someone has code that resolves this and where to place the polyfill? I'm seeing a lot of errors in my site, and I'm a relatively recent convert to Next.js so not sure where to put things that modify webpack.

[ebratanova]

If you have sentry you can simply add the import of polyfill to sentry client config file and it's done; if you don't have sentry, then you can do smth like this:

1. in next.config:

    webpack: (config, buildContext) => {
        if (!buildContext.isServer) {
         const origEntryProperty = config.entry;
        config.entry = async () =>
          addPolyfillsToClientEntryProperty(origEntryProperty, buildContext);
      }
      return config;
    },

2. as for how to implement addPolyfillsToClientEntryProperty, check out https://github.com/getsentry/sentry-javascript/blob/3fc12c67c52fbae6354deccad565192103ca30cc/packages/nextjs/src/config/webpack.ts#L371 and borrow addSentryToClientEntryProperty, you just have to change line
   const filesToInject = clientSentryConfigFileName ? [`./${clientSentryConfigFileName}`] : [];
   with const filesToInject = ['path to file with readablestream polyfill import']

[anneau]

I'm not entirely sure of the exact cause, but loading web-streams-polyfill/polyfill resolved this issue.

If you're using Next.js v15.3 or higher, you should be able to fix this by simply importing web-streams-polyfill/polyfill within your instrumentation-client file.

https://nextjs.org/docs/app/api-reference/file-conventions/instrumentation-client