facebook/react · error · Error

524

524

Error message

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

What it means

Async iterables returned from the server are replayed on the client through a FlightIterator whose next() accepts no argument: the Flight protocol only transports values server-to-client. Generator-style two-way communication (it.next(x)) cannot be carried over the boundary, so any non-undefined argument throws.

Source

Thrown at packages/react-server/src/ReactFlightReplyServer.js:1566

        return;
      }
      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> = {
    [ASYNC_ITERATOR](): $AsyncIterator<T, T, void> {
      let nextReadIndex = 0;
      // $FlowFixMe[invalid-constructor] Flow doesn't support functions as constructors
      return new FlightIterator((arg: void) => {
        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

Drain server iterables with bare next() calls (no argument).
If you must send data per iteration, call a server action instead of pushing values into the iterator.
Wrap the iterator so incidental arguments are stripped before reaching Flight's iterator.

Example fix

// before
const it = serverIterable[Symbol.asyncIterator]();
const {value} = await it.next(requestPayload); // throws

// after
const it = serverIterable[Symbol.asyncIterator]();
const {value} = await it.next(); // no argument
const result = await doWorkServerAction(requestPayload); // send data via an action

Defensive patterns

Strategy: validation

Validate before calling

// safe drain helper: always calls next() with no argument
async function* drain<T>(it: AsyncIterator<T>): AsyncGenerator<T> {
  let r = await it.next();
  while (!r.done) {
    yield r.value;
    r = await it.next();
  }
}
// wrap any third-party consumer input:
const safe = drain(serverIterable[Symbol.asyncIterator]());

Try / catch

try {
  const r = await it.next();
} catch (e) {
  if (String(e).includes('AsyncIterables passed to Client Components')) {
    // call site is forwarding a value into next(); refactor it to bare next()
  }
  throw e;
}

Prevention

Always call next() with no arguments on iterables that came from the server.
Send per-iteration data through server actions, not through iterator arguments.
When feeding server iterables to libraries that pass values to next(), wrap them with a bare-next adapter first.

When it happens

Trigger: Client code treats a server-provided async iterator like a local generator and calls await it.next(someValue); or a library whose contract forwards an input into next() (task pools, pipeline utilities) consumes the server iterable.

Common situations: Porting generator-based pipelines to RSC; feeding server streams into libraries that call next(input) by design.

Related errors

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