facebook/react · error · Error

Values cannot be passed to next() of AsyncIterables passed…

Error message

Values cannot be passed to next() of AsyncIterables passed to Client Components.

What it means

When an AsyncIterable crosses the server-to-client boundary, React constructs a client-side iterator that streams values out of the Flight payload. The wire protocol is one-way: there is no channel to push a value back to the server, so the generated next() throws if you pass any argument other than undefined. It protects the protocol from being misused as a duplex stream.

Solutions

Call next() with no arguments (or explicitly undefined) on server-passed iterables
Use for await...of to consume the stream - it never passes a value to next()
If you need bidirectional communication, use a different transport (WebSocket, or calling Server Functions from the client) - RSC iterables are read-only
Wrap the iterator in a facade whose next() drops arguments before passing it to value-forwarding helpers

Example fix

// before
const it = serverIterable[Symbol.asyncIterator]();
while (true) {
  const {value, done} = await it.next(signal); // passing a value -> throws
  if (done) break;
  handle(value);
}

// after
for await (const value of serverIterable) {
  handle(value);
}

Defensive patterns

Strategy: validation

Validate before calling

// Wrap server iterables before handing them to value-forwarding helpers
const oneWay = <T>(it: AsyncIterator<T>) => ({
  next: () => it.next(), // drops any argument a caller tries to send
  [Symbol.asyncIterator]() { return this; },
});

Prevention

Treat server-passed AsyncIterables as read-only streams
Consume them with for await...of, which never passes values to next()
Do not bridge them into generator delegation (yield*) or pipelines that call next(value)
Use WebSockets or Server Function calls when you need bidirectional flow

When it happens

Trigger: Manually calling iterator.next(someValue) on an AsyncIterable received from a Server Component / Server Function; wiring the server iterable into a helper that forwards values to next() (e.g. bridging into another generator or Rx pipeline that passes arguments); using yield* delegation where values are sent downstream.

Common situations: Treating a server-passed stream like a socket or channel; adapter code written for general AsyncIterables that happens to call next(arg); protocols like some RPC/stream libraries that use next(value) for backpressure or cancellation signalling.

Related errors

AI-assisted analysis of facebook/react@eafeac097b (2026-08-21). Data as JSON: /api/errors/3bbfc88b05e15d02. Report an issue: GitHub.

Appendix: source

Thrown at packages/react-client/src/ReactFlightClient.js:3604

      }
      closed = true;
      if (nextWriteIndex === buffer.length) {
        buffer[nextWriteIndex] =
          createPendingChunk<IteratorResult<T, T>>(response);
      }
      while (nextWriteIndex < buffer.length) {
        triggerErrorOnChunk(response, buffer[nextWriteIndex++], error);
      }
    },
  };

  const iterable: $AsyncIterable<T, T, void> = {} as any;
  // $FlowFixMe[cannot-write]
  iterable[ASYNC_ITERATOR] = (): $AsyncIterator<T, T, void> => {
    let nextReadIndex = 0;
    return createIterator(arg => {
      if (arg !== undefined) {
        throw new Error(
          'Values cannot be passed to next() of AsyncIterables passed to Client Components.',
        );
      }
      if (nextReadIndex === buffer.length) {
        if (closed) {
          // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
          return new ReactPromise(
            INITIALIZED,
            {done: true, value: undefined},
            null,
          );
        }
        buffer[nextReadIndex] =
          createPendingChunk<IteratorResult<T, T>>(response);
      }
      return buffer[nextReadIndex++];
    });
  };

View on GitHub (pinned to eafeac097b)