[Flight] Add support for returning undefined from render (#26349)

eps1lon · web-flow · commit d1ad984db159 · 2023-03-09T22:18:52.000+01:00
## Summary

Adds support for returning `undefined` from Server Components.
Also fixes a bug where rendering an empty fragment would throw the same
error as returning undefined.

## How did you test this change?

- [x] test failed with same error message I got when returning undefined
from Server Components in a Next.js app
- [x] test passes after adding encoding for `undefined`
diff --git a/packages/react-client/src/ReactFlightClient.js b/packages/react-client/src/ReactFlightClient.js
@@ -556,6 +556,11 @@ export function parseModelString(
             throw chunk.reason;
         }
       }
+      case 'u': {
+        // matches "$undefined"
+        // Special encoding for `undefined` which can't be serialized as JSON otherwise.
+        return undefined;
+      }
       default: {
         // We assume that anything else is a reference ID.
         const id = parseInt(value.substring(1), 16);
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -197,6 +197,38 @@ describe('ReactFlight', () => {
     expect(ReactNoop).toMatchRenderedOutput(<span>ABC</span>);
   });
 
+  it('can render undefined', async () => {
+    function Undefined() {
+      return undefined;
+    }
+
+    const model = <Undefined />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
+  it('can render an empty fragment', async () => {
+    function Empty() {
+      return <React.Fragment />;
+    }
+
+    const model = <Empty />;
+
+    const transport = ReactNoopFlightServer.render(model);
+
+    await act(async () => {
+      ReactNoop.render(await ReactNoopFlightClient.read(transport));
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(null);
+  });
+
   it('can render a lazy component as a shared component on the server', async () => {
     function SharedComponent({text}) {
       return (
diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js
@@ -117,6 +117,7 @@ export type ReactClientValue =
   | number
   | symbol
   | null
+  | void
   | Iterable<ReactClientValue>
   | Array<ReactClientValue>
   | ReactClientObject
@@ -546,6 +547,10 @@ function serializeProviderReference(name: string): string {
   return '$P' + name;
 }
 
+function serializeUndefined(): string {
+  return '$undefined';
+}
+
 function serializeClientReference(
   request: Request,
   parent:
@@ -1134,14 +1139,14 @@ export function resolveModelToJSON(
     return escapeStringValue(value);
   }
 
-  if (
-    typeof value === 'boolean' ||
-    typeof value === 'number' ||
-    typeof value === 'undefined'
-  ) {
+  if (typeof value === 'boolean' || typeof value === 'number') {
     return value;
   }
 
+  if (typeof value === 'undefined') {
+    return serializeUndefined();
+  }
+
   if (typeof value === 'function') {
     if (isClientReference(value)) {
       return serializeClientReference(request, parent, key, (value: any));

Original file line number	Diff line number	Diff line change
`@@ -556,6 +556,11 @@ export function parseModelString(`
`556`	`556`	`throw chunk.reason;`
`557`	`557`	`}`
`558`	`558`	`}`
	`559`	`+ case 'u': {`
	`560`	`+ // matches "$undefined"`
	`561`	+ // Special encoding for `undefined` which can't be serialized as JSON otherwise.
	`562`	`+ return undefined;`
	`563`	`+ }`
`559`	`564`	`default: {`
`560`	`565`	`// We assume that anything else is a reference ID.`
`561`	`566`	`const id = parseInt(value.substring(1), 16);`