[test] Cleanup stack assertions in tests mixing React Server and Client

Author: eps1lon

packages/react-client/src/ReactFlightReplyClient.js

@@ -474,8 +474,22 @@ export function processReply(
         }
       }
 
+      const existingReference = writtenObjects.get(value);
+
       // $FlowFixMe[method-unbinding]
       if (typeof value.then === 'function') {
+        if (existingReference !== undefined) {
+          if (modelRoot === value) {
+            // This is the ID we're currently emitting so we need to write it
+            // once but if we discover it again, we refer to it by id.
+            modelRoot = null;
+          } else {
+            // We've already emitted this as an outlined object, so we can
+            // just refer to that by its existing ID.
+            return existingReference;
+          }
+        }
+
         // We assume that any object with a .then property is a "Thenable" type,
         // or a Promise type. Either of which can be represented by a Promise.
         if (formData === null) {
@@ -484,11 +498,19 @@ export function processReply(
         }
         pendingParts++;
         const promiseId = nextPartId++;
+        const promiseReference = serializePromiseID(promiseId);
+        writtenObjects.set(value, promiseReference);
         const thenable: Thenable<any> = (value: any);
         thenable.then(
           partValue => {
             try {
-              const partJSON = serializeModel(partValue, promiseId);
+              const previousReference = writtenObjects.get(partValue);
+              let partJSON;
+              if (previousReference !== undefined) {
+                partJSON = JSON.stringify(previousReference);
+              } else {
+                partJSON = serializeModel(partValue, promiseId);
+              }
               // $FlowFixMe[incompatible-type] We know it's not null because we assigned it above.
               const data: FormData = formData;
               data.append(formFieldPrefix + promiseId, partJSON);
@@ -504,10 +526,9 @@ export function processReply(
           // that throws on the server instead.
           reject,
         );
-        return serializePromiseID(promiseId);
+        return promiseReference;
       }
 
-      const existingReference = writtenObjects.get(value);
       if (existingReference !== undefined) {
         if (modelRoot === value) {
           // This is the ID we're currently emitting so we need to write it

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js

@@ -2820,15 +2820,16 @@ describe('ReactFlightDOMBrowser', () => {
       },
     });
 
+    const app = ReactServer.createElement(
+      ReactServer.Fragment,
+      null,
+      ReactServer.createElement(Paragraph, null, 'foo'),
+      ReactServer.createElement(Paragraph, null, 'bar'),
+    );
     const stream = await serverAct(() =>
       ReactServerDOMServer.renderToReadableStream(
         {
-          root: ReactServer.createElement(
-            ReactServer.Fragment,
-            null,
-            ReactServer.createElement(Paragraph, null, 'foo'),
-            ReactServer.createElement(Paragraph, null, 'bar'),
-          ),
+          root: app,
         },
         webpackMap,
         {
@@ -2900,27 +2901,11 @@ describe('ReactFlightDOMBrowser', () => {
             "name": "Paragraph",
             "props": {},
             "stack": [
-              [
-                "",
-                "/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js",
-                2829,
-                27,
-                2823,
-                34,
-              ],
-              [
-                "serverAct",
-                "/packages/internal-test-utils/internalAct.js",
-                270,
-                19,
-                231,
-                1,
-              ],
               [
                 "Object.<anonymous>",
                 "/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMBrowser-test.js",
-                2823,
-                18,
+                2826,
+                19,
                 2810,
                 89,
               ],

packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMNode-test.js

@@ -1216,11 +1216,7 @@ describe('ReactFlightDOMNode', () => {
         const data1 = await getDynamicData1();
         const data2 = await getDynamicData2();
 
-        return (
-          <p>
-            {data1} {data2}
-          </p>
-        );
+        return ReactServer.createElement('p', null, data1, ' ', data2);
       }
 
       function App() {
@@ -1350,8 +1346,8 @@ describe('ReactFlightDOMNode', () => {
               : '\n') +
             '    in body\n' +
             '    in html\n' +
-            '    in App (file://ReactFlightDOMNode-test.js:1233:25)\n' +
-            '    in ClientRoot (ReactFlightDOMNode-test.js:1308:16)',
+            '    in App (file://ReactFlightDOMNode-test.js:1229:25)\n' +
+            '    in ClientRoot (ReactFlightDOMNode-test.js:1304:16)',
         );
       } else {
         expect(
@@ -1371,15 +1367,15 @@ describe('ReactFlightDOMNode', () => {
           ).toBe(
             '\n' +
               '    in Dynamic (file://ReactFlightDOMNode-test.js:1216:27)\n' +
-              '    in App (file://ReactFlightDOMNode-test.js:1233:25)',
+              '    in App (file://ReactFlightDOMNode-test.js:1229:25)',
           );
         } else {
           expect(
             normalizeCodeLocInfo(ownerStack, {preserveLocation: true}),
           ).toBe(
             '' +
               '\n' +
-              '    in App (file://ReactFlightDOMNode-test.js:1233:25)',
+              '    in App (file://ReactFlightDOMNode-test.js:1229:25)',
           );
         }
       } else {

packages/react-server/src/ReactFlightReplyServer.js

@@ -1006,6 +1006,11 @@ function parseTypedArray<T: $ArrayBufferView | ArrayBuffer>(
   const id = parseInt(reference.slice(2), 16);
   const prefix = response._prefix;
   const key = prefix + id;
+  const chunks = response._chunks;
+  if (chunks.has(id)) {
+    throw new Error('Cannot repeat reference typed arrays.');
+  }
+
   // We should have this backingEntry in the store already because we emitted
   // it before referencing it. It should be a Blob.
   // TODO: Use getOutlinedModel to allow us to emit the Blob later. We should be able to do that now.
@@ -1116,6 +1121,10 @@ function parseReadableStream<T>(
   parentKey: string,
 ): ReadableStream {
   const id = parseInt(reference.slice(2), 16);
+  const chunks = response._chunks;
+  if (chunks.has(id)) {
+    throw new Error('Cannot self reference streams.');
+  }
 
   let controller: ReadableStreamController = (null: any);
   const stream = new ReadableStream({
@@ -1218,6 +1227,10 @@ function parseAsyncIterable<T>(
   parentKey: string,
 ): $AsyncIterable<T, T, void> | $AsyncIterator<T, T, void> {
   const id = parseInt(reference.slice(2), 16);
+  const chunks = response._chunks;
+  if (chunks.has(id)) {
+    throw new Error('Cannot self reference streams.');
+  }
 
   const buffer: Array<SomeChunk<IteratorResult<T, T>>> = [];
   let closed = false;

packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js

@@ -3155,7 +3155,7 @@ describe('ReactFlightAsyncDebugInfo', () => {
     }
 
     const stream = ReactServerDOMServer.renderToPipeableStream(
-      <Component />,
+      ReactServer.createElement(Component),
       {},
     );
 
@@ -3192,7 +3192,7 @@ describe('ReactFlightAsyncDebugInfo', () => {
                 "Object.<anonymous>",
                 "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
                 3158,
-                40,
+                19,
                 3146,
                 36,
               ],
@@ -3216,7 +3216,7 @@ describe('ReactFlightAsyncDebugInfo', () => {
                     "Object.<anonymous>",
                     "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
                     3158,
-                    40,
+                    19,
                     3146,
                     36,
                   ],
@@ -3248,7 +3248,7 @@ describe('ReactFlightAsyncDebugInfo', () => {
                   "Object.<anonymous>",
                   "/packages/react-server/src/__tests__/ReactFlightAsyncDebugInfo-test.js",
                   3158,
-                  40,
+                  19,
                   3146,
                   36,
                 ],

scripts/error-codes/codes.json

@@ -551,5 +551,7 @@
   "563": "This render completed successfully. All cacheSignals are now aborted to allow clean up of any unused resources.",
   "564": "Unknown command. The debugChannel was not wired up properly.",
   "565": "resolveDebugMessage/closeDebugChannel should not be called for a Request that wasn't kept alive. This is a bug in React.",
-  "566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead."
+  "566": "FragmentInstance.scrollIntoView() does not support scrollIntoViewOptions. Use the alignToTop boolean instead.",
+  "567": "Cannot self reference streams.",
+  "568": "Cannot repeat reference typed arrays."
 }