facebook/react · error · Error

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

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.

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)

Solutions

  1. Call next() with no arguments (or explicitly undefined) on server-passed iterables
  2. Use for await...of to consume the stream - it never passes a value to next()
  3. If you need bidirectional communication, use a different transport (WebSocket, or calling Server Functions from the client) - RSC iterables are read-only
  4. 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

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.