@shopify/hydrogen 0.22.1 → 0.23.0

package/vendor/react-server-dom-vite/esm/react-server-dom-vite-plugin.js

@@ -10,7 +10,7 @@
 
 import { init, parse } from 'es-module-lexer';
 import MagicString from 'magic-string';
-import { normalizePath, transformWithEsbuild } from 'vite';
+import { normalizePath, transformWithEsbuild, createServer } from 'vite';
 import { promises } from 'fs';
 import path from 'path';
 
@@ -88,59 +88,43 @@ function _createForOfIteratorHelper(o, allowArrayLike) {
   };
 }
 
+var assign = Object.assign;
+
 var rscViteFileRE = /\/react-server-dom-vite.js/;
 var noProxyRE = /[&?]no-proxy($|&)/;
+
+var isClientComponent = function (id) {
+  return /\.client\.[jt]sx?($|\?)/.test(id);
+};
+
 function ReactFlightVitePlugin() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      serverBuildEntries = _ref.serverBuildEntries,
       _ref$isServerComponen = _ref.isServerComponentImporterAllowed,
       isServerComponentImporterAllowed = _ref$isServerComponen === void 0 ? function (importer) {
     return false;
-  } : _ref$isServerComponen,
-      _ref$isClientComponen = _ref.isClientComponent,
-      isClientComponent = _ref$isClientComponen === void 0 ? function (id) {
-    return /\.client\.[jt]sx?($|\?)/.test(id);
-  } : _ref$isClientComponen,
-      findClientComponentsForClientBuild = _ref.findClientComponentsForClientBuild;
+  } : _ref$isServerComponen;
 
   var config;
   var server;
   var invalidateTimeout;
-  var absoluteImporterPath;
+  var globImporterPath;
 
-  function invalidateImporter() {
+  function invalidateGlobImporter() {
     clearTimeout(invalidateTimeout);
     invalidateTimeout = setTimeout(function () {
-      return server.watcher.emit('change', absoluteImporterPath);
+      return server.watcher.emit('change', globImporterPath);
     }, 100);
   }
 
-  function wrapIfClientComponent(id) {
-    var handle = function (isClient) {
-      if (!isClient) return null;
-
-      if (server) {
-        var moduleNode = server.moduleGraph.getModuleById(id);
-
-        if (!moduleNode.__isClientComponent) {
-          moduleNode.__isClientComponent = true;
-          if (absoluteImporterPath) invalidateImporter();
-        }
-      }
-
-      return proxyClientComponent(id.split('?')[0]);
-    };
-
-    var tmp = isClientComponent(id);
-    return typeof tmp === 'boolean' ? handle(tmp) : tmp.then(handle);
-  }
-
   return {
     name: 'vite-plugin-react-server-components',
     enforce: 'pre',
     configureServer: function (_server) {
       server = _server;
     },
-    configResolved: function (_config) {
+    configResolved: async function (_config) {
+      await init;
       config = _config; // By pushing this plugin at the end of the existing array,
       // we enforce running it *after* Vite resolves import.meta.glob.
 
@@ -148,17 +132,34 @@ function ReactFlightVitePlugin() {
     },
     resolveId: function (source, importer) {
       if (!importer) return null;
+
+      if (noProxyRE.test(source)) {
+        var _source$split = source.split('?'),
+            id = _source$split[0],
+            query = _source$split[1];
+
+        return this.resolve(id, importer, {
+          skipSelf: true
+        }).then(function (result) {
+          if (!result) return null;
+          return assign({}, result, {
+            id: result.id + (query ? "?" + query : ''),
+            moduleSideEffects: false
+          });
+        });
+      }
       /**
        * Throw errors when non-Server Components try to load Server Components.
        */
 
+
       if (/\.server(\.[jt]sx?)?$/.test(source) && !(/(\.server\.[jt]sx?|index\.html)$/.test(importer) || isServerComponentImporterAllowed(importer, source))) {
         throw new Error("Cannot import " + source + " from \"" + importer + "\". " + 'By react-server convention, .server.js files can only be imported from other .server.js files. ' + 'That way nobody accidentally sends these to the client by indirectly importing it.');
       }
     },
     load: function (id) {
       var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      if (!options.ssr || !shouldCheckClientComponent(id)) return;
+      if (!options.ssr || !isClientComponent(id) || noProxyRE.test(id)) return;
 
       if (server) {
         var mod = server.moduleGraph.idToModuleMap.get(id.replace('/@fs', ''));
@@ -171,14 +172,28 @@ function ReactFlightVitePlugin() {
             // so we don't need to create a module reference
             return;
           }
+        } // Mark module as a client component.
+
+
+        var moduleNode = server.moduleGraph.getModuleById(id);
+        if (!moduleNode.meta) moduleNode.meta = {};
+
+        if (!moduleNode.meta.isClientComponent) {
+          moduleNode.meta.isClientComponent = true;
+          if (globImporterPath) invalidateGlobImporter();
         }
       }
 
-      return wrapIfClientComponent(id);
+      return proxyClientComponent(id.split('?')[0]);
     },
     transform: function (code, id) {
       var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
 
+      // Add more information for this module in the graph.
+      // It will be used later to discover client boundaries.
+      if (server && options.ssr && /\.[jt]sx?($|\?)/.test(id)) {
+        augmentModuleGraph(server.moduleGraph, id, code);
+      }
       /**
        * In order to allow dynamic component imports from RSC, we use Vite's import.meta.glob.
        * This hook replaces the glob placeholders with resolved paths to all client components.
@@ -188,6 +203,8 @@ function ReactFlightVitePlugin() {
        * If the paths are relative to the root instead, Vite won't add the querystring
        * and we will have duplicated files in the browser (with duplicated contexts, etc).
        */
+
+
       if (rscViteFileRE.test(id)) {
         var INJECTING_RE = /\{\s*__INJECTED_CLIENT_IMPORTERS__[:\s]*null[,\s]*\}\s*;/;
         var s = new MagicString(code);
@@ -227,16 +244,15 @@ function ReactFlightVitePlugin() {
         };
 
         if (config.command === 'serve') {
-          absoluteImporterPath = id;
-          return injectGlobs(findClientComponentsForDev(server));
+          globImporterPath = id;
+          return injectGlobs(findClientBoundaries(server.moduleGraph));
         }
 
-        if (!findClientComponentsForClientBuild) {
-          throw new Error('[react-server-dom-vite] Parameter findClientComponentsForClientBuild is required for client build');
+        if (!serverBuildEntries) {
+          throw new Error('[react-server-dom-vite] Parameter serverBuildEntries is required for client build');
         }
 
-        var tmp = findClientComponentsForClientBuild(config);
-        return Array.isArray(tmp) ? injectGlobs(tmp) : tmp.then(injectGlobs);
+        return findClientBoundariesForClientBuild(serverBuildEntries).then(injectGlobs);
       }
     }
   };
@@ -290,29 +306,31 @@ async function proxyClientComponent(filepath, src) {
   exportStatements.forEach(function (key) {
     var isDefault = key === DEFAULT_EXPORT;
     var componentName = isDefault ? getComponentFilename(filepath) : key;
-    proxyCode += "export " + (isDefault ? DEFAULT_EXPORT : "const " + componentName + " =") + " wrapInClientProxy({ name: '" + componentName + "', id: '" + getComponentId(filepath) + "', value: allImports['" + key + "'], isDefault: " + // eslint-disable-next-line react-internal/safe-string-coercion
+    proxyCode += "export " + (isDefault ? DEFAULT_EXPORT : "const " + componentName + " =") + " /* @__PURE__ */wrapInClientProxy({ name: '" + componentName + "', id: '" + getComponentId(filepath) + "', value: allImports['" + key + "'], isDefault: " + // eslint-disable-next-line react-internal/safe-string-coercion
     String(isDefault) + " });\n";
   });
-  return proxyCode;
-}
-
-function shouldCheckClientComponent(id) {
-  return /\.[jt]sx?($|\?)/.test(id) && !noProxyRE.test(id);
+  return {
+    code: proxyCode,
+    moduleSideEffects: false
+  };
 }
 
-function findClientComponentsForDev(server) {
-  var clientComponents = []; // eslint-disable-next-line no-for-of-loops/no-for-of-loops
+function findClientBoundaries(moduleGraph) {
+  var clientBoundaries = []; // eslint-disable-next-line no-for-of-loops/no-for-of-loops
 
-  var _iterator = _createForOfIteratorHelper(server.moduleGraph.fileToModulesMap.values()),
+  var _iterator = _createForOfIteratorHelper(moduleGraph.fileToModulesMap.values()),
       _step;
 
   try {
     for (_iterator.s(); !(_step = _iterator.n()).done;) {
       var set = _step.value;
       var clientModule = Array.from(set).find(function (moduleNode) {
-        return moduleNode.__isClientComponent;
+        return moduleNode.meta && moduleNode.meta.isClientComponent;
       });
-      if (clientModule) clientComponents.push(clientModule.file);
+
+      if (clientModule && isDirectImportInServer(clientModule)) {
+        clientBoundaries.push(clientModule.file);
+      }
     }
   } catch (err) {
     _iterator.e(err);
@@ -320,7 +338,28 @@ function findClientComponentsForDev(server) {
     _iterator.f();
   }
 
-  return clientComponents;
+  return clientBoundaries;
+}
+
+async function findClientBoundariesForClientBuild(serverEntries) {
+  // Viteception
+  var server = await createServer({
+    clearScreen: false,
+    server: {
+      middlewareMode: 'ssr'
+    }
+  });
+
+  try {
+    // Load server entries to discover client components
+    await Promise.all(serverEntries.map(server.ssrLoadModule));
+  } catch (error) {
+    error.message = 'Could not load server build entries: ' + error.message;
+    throw error;
+  }
+
+  await server.close();
+  return findClientBoundaries(server.moduleGraph);
 }
 
 var hashImportsPlugin = {
@@ -345,8 +384,120 @@ var hashImportsPlugin = {
       };
     }
   }
-}; // This can be used in custom findClientComponentsForClientBuild implementations
+};
+/**
+ * A client module should behave as a client boundary
+ * if it is imported by the server before encountering
+ * another boundary in the process.
+ * Traverse the module graph upwards to find non client
+ * components that import the current module.
+ */
+
+function isDirectImportInServer(currentMod, originalMod) {
+  // TODO: this should use recursion in any module that exports
+  // the original one, not only in full facade files.
+  if (!originalMod || (currentMod.meta || {}).isFacade) {
+    return Array.from(currentMod.importers).some(function (importer) {
+      return (// eslint-disable-next-line no-unused-vars
+        isDirectImportInServer(importer, originalMod || currentMod)
+      );
+    });
+  } // Not enough information: safer to assume it is
+  // imported in server to create a new boundary.
+
+
+  if (!currentMod.meta || !originalMod.meta) return true; // If current module is a client component, stop checking
+  // parents since this can be the actual boundary.
+
+  if (isClientComponent(currentMod.file)) return false; // If current module is not a client component, assume
+  // it is a server component on a shared component
+  // that will be imported in the server to be safe.
+  // However, due to the lack of tree-shaking in the dev module graph,
+  // we need to manually make sure this module is importing something from
+  // the original module before marking it as client boundary.
+  // -- TODO: this only checks namedExports right now. It should
+  // consider default exports and variable renaming in facade modules.
+
+  return currentMod.meta.imports.some(function (imp) {
+    return imp.action === 'import' && (imp.from === originalMod.file || (imp.variables || []).some(function (_ref2) {
+      var name = _ref2[0];
+      return originalMod.meta.namedExports.includes(name);
+    }));
+  });
+}
+
+function resolveModPath(modPath, dirname, retryExtension) {
+  var absolutePath = '';
+
+  try {
+    absolutePath = modPath.startsWith('.') ? normalizePath(path.resolve(dirname, modPath)) : modPath;
+    return normalizePath(require.resolve(absolutePath + (retryExtension || '')));
+  } catch (error) {
+    if (!/\.[jt]sx?$/.test(absolutePath) && retryExtension !== '.tsx') {
+      // Node cannot infer .[jt]sx extensions.
+      // Append them here and retry a couple of times.
+      return resolveModPath(absolutePath, dirname, retryExtension ? '.tsx' : '.jsx');
+    }
+  }
+}
+
+function augmentModuleGraph(moduleGraph, id, code) {
+  var currentModule = moduleGraph.getModuleById(id);
+  if (!currentModule) return;
+
+  var _id$split = id.split('?'),
+      source = _id$split[0];
+
+  var dirname = normalizePath(path.dirname(source));
+
+  var _parse2 = parse(code),
+      rawImports = _parse2[0],
+      namedExports = _parse2[1],
+      isFacade = _parse2[2]; // This is currently not used but it should be considered
+  // to improve the crawling in `isDirectImportInServer`.
+
+
+  var imports = [];
+  rawImports.forEach(function (_ref3) {
+    var startMod = _ref3.s,
+        endMod = _ref3.e,
+        dynamicImportIndex = _ref3.d,
+        startStatement = _ref3.ss,
+        endStatement = _ref3.se;
+    if (dynamicImportIndex !== -1) return; // Skip dynamic imports for now
+
+    var modPath = code.slice(startMod, endMod);
+    var resolvedPath = resolveModPath(modPath.split('?')[0], dirname);
+    if (!resolvedPath) return; // Virtual modules or other exceptions
+
+    var _code$slice$split$0$s = code.slice(startStatement, endStatement).split(/\s+(from\s+)?['"]/m)[0].split(/\s+(.+)/m),
+        action = _code$slice$split$0$s[0],
+        _code$slice$split$0$s2 = _code$slice$split$0$s[1],
+        variables = _code$slice$split$0$s2 === void 0 ? '' : _code$slice$split$0$s2;
+
+    imports.push({
+      action: action,
+      // 'import' or 'export'
+      variables: variables // [['originalName', 'alias']]
+      .replace(/[{}]/gm, '').trim().split(/\s*,\s*/m).filter(Boolean).map(function (s) {
+        return s.split(/\s+as\s+/m);
+      }),
+      from: resolvedPath,
+      // '/absolute/path'
+      originalFrom: modPath // './path' or '3plib/subpath'
+
+    });
+  });
 
-ReactFlightVitePlugin.findClientComponentsFromServer = findClientComponentsForDev;
+  if (!currentModule.meta) {
+    currentModule.meta = {};
+  }
+
+  assign(currentModule.meta, {
+    isFacade: isFacade,
+    namedExports: namedExports,
+    imports: imports
+  });
+}
 
 export default ReactFlightVitePlugin;

package/vendor/react-server-dom-vite/esm/react-server-dom-vite-writer.browser.server.js

@@ -178,13 +178,15 @@ function processSymbolChunk(request, id, name) {
 // eslint-disable-next-line no-unused-vars
 var MODULE_TAG = Symbol.for('react.module.reference');
 function getModuleKey(reference) {
+  if (typeof reference === 'string') reference = globalThis.__STRING_REFERENCE_INDEX[reference];
   return reference.filepath + '#' + reference.name;
 }
-function getModuleReference(reference) {
-  if (typeof reference === 'string') return globalThis.__STRING_REFERENCE_INDEX[reference];
-  return reference && reference.$$typeof === MODULE_TAG ? reference : undefined;
+function isModuleReference(reference) {
+  if (typeof reference === 'string') return !!globalThis.__STRING_REFERENCE_INDEX[reference];
+  return reference.$$typeof === MODULE_TAG;
 }
 function resolveModuleMetaData(config, moduleReference) {
+  if (typeof moduleReference === 'string') moduleReference = globalThis.__STRING_REFERENCE_INDEX[moduleReference];
   return {
     id: moduleReference.filepath,
     name: moduleReference.name
@@ -500,7 +502,7 @@ var startInlineScript = stringToPrecomputedChunk('<script>');
 var endInlineScript = stringToPrecomputedChunk('</script>');
 var startScriptSrc = stringToPrecomputedChunk('<script src="');
 var startModuleSrc = stringToPrecomputedChunk('<script type="module" src="');
-var endAsyncScript = stringToPrecomputedChunk('" async=""></script>'); // Allows us to keep track of what we've already written so we can refer back to it.
+var endAsyncScript = stringToPrecomputedChunk('" async=""></script>');
 
 var textSeparator = stringToPrecomputedChunk('<!-- -->');
 
@@ -535,6 +537,10 @@ var startPendingSuspenseBoundary1 = stringToPrecomputedChunk('<!--$?--><template
 var startPendingSuspenseBoundary2 = stringToPrecomputedChunk('"></template>');
 var startClientRenderedSuspenseBoundary = stringToPrecomputedChunk('<!--$!-->');
 var endSuspenseBoundary = stringToPrecomputedChunk('<!--/$-->');
+var clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk('<template data-hash="');
+var clientRenderedSuspenseBoundaryError1A = stringToPrecomputedChunk('" data-msg="');
+var clientRenderedSuspenseBoundaryError1B = stringToPrecomputedChunk('" data-stack="');
+var clientRenderedSuspenseBoundaryError2 = stringToPrecomputedChunk('"></template>');
 var startSegmentHTML = stringToPrecomputedChunk('<div hidden id="');
 var startSegmentHTML2 = stringToPrecomputedChunk('">');
 var endSegmentHTML = stringToPrecomputedChunk('</div>');
@@ -564,7 +570,7 @@ var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
 // const SUSPENSE_PENDING_START_DATA = '$?';
 // const SUSPENSE_FALLBACK_START_DATA = '$!';
 //
-// function clientRenderBoundary(suspenseBoundaryID) {
+// function clientRenderBoundary(suspenseBoundaryID, errorHash, errorMsg, errorComponentStack) {
 //   // Find the fallback's first element.
 //   const suspenseIdNode = document.getElementById(suspenseBoundaryID);
 //   if (!suspenseIdNode) {
@@ -576,6 +582,11 @@ var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
 //   const suspenseNode = suspenseIdNode.previousSibling;
 //   // Tag it to be client rendered.
 //   suspenseNode.data = SUSPENSE_FALLBACK_START_DATA;
+//   // assign error metadata to first sibling
+//   let dataset = suspenseIdNode.dataset;
+//   if (errorHash) dataset.hash = errorHash;
+//   if (errorMsg) dataset.msg = errorMsg;
+//   if (errorComponentStack) dataset.stack = errorComponentStack;
 //   // Tell React to retry it if the parent already hydrated.
 //   if (suspenseNode._reactRetry) {
 //     suspenseNode._reactRetry();
@@ -659,7 +670,7 @@ var endSegmentColGroup = stringToPrecomputedChunk('</colgroup></table>');
 
 var completeSegmentFunction = 'function $RS(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)}';
 var completeBoundaryFunction = 'function $RC(a,b){a=document.getElementById(a);b=document.getElementById(b);b.parentNode.removeChild(b);if(a){a=a.previousSibling;var f=a.parentNode,c=a.nextSibling,e=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d)if(0===e)break;else e--;else"$"!==d&&"$?"!==d&&"$!"!==d||e++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;b.firstChild;)f.insertBefore(b.firstChild,c);a.data="$";a._reactRetry&&a._reactRetry()}}';
-var clientRenderFunction = 'function $RX(a){if(a=document.getElementById(a))a=a.previousSibling,a.data="$!",a._reactRetry&&a._reactRetry()}';
+var clientRenderFunction = 'function $RX(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.hash=c),d&&(a.msg=d),e&&(a.stack=e),b._reactRetry&&b._reactRetry())}';
 var completeSegmentScript1Full = stringToPrecomputedChunk(completeSegmentFunction + ';$RS("');
 var completeSegmentScript1Partial = stringToPrecomputedChunk('$RS("');
 var completeSegmentScript2 = stringToPrecomputedChunk('","');
@@ -670,7 +681,9 @@ var completeBoundaryScript2 = stringToPrecomputedChunk('","');
 var completeBoundaryScript3 = stringToPrecomputedChunk('")</script>');
 var clientRenderScript1Full = stringToPrecomputedChunk(clientRenderFunction + ';$RX("');
 var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("');
-var clientRenderScript2 = stringToPrecomputedChunk('")</script>');
+var clientRenderScript1A = stringToPrecomputedChunk('"');
+var clientRenderScript2 = stringToPrecomputedChunk(')</script>');
+var clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(',');
 
 var rendererSigil;
 
@@ -998,13 +1011,13 @@ function attemptResolveElement(type, key, ref, props) {
     throw new Error('Refs cannot be used in server components, nor passed to client components.');
   }
 
-  if (getModuleReference(type)) {
-    // This is a reference to a client component.
-    return [REACT_ELEMENT_TYPE, type, key, props];
-  }
-
   if (typeof type === 'function') {
-    // This is a server-side component.
+    if (isModuleReference(type)) {
+      // This is a reference to a client component.
+      return [REACT_ELEMENT_TYPE, type, key, props];
+    } // This is a server-side component.
+
+
     return type(props);
   } else if (typeof type === 'string') {
     // This is a host element. E.g. HTML.
@@ -1022,6 +1035,11 @@ function attemptResolveElement(type, key, ref, props) {
 
     return [REACT_ELEMENT_TYPE, type, key, props];
   } else if (type != null && typeof type === 'object') {
+    if (isModuleReference(type)) {
+      // This is a reference to a client component.
+      return [REACT_ELEMENT_TYPE, type, key, props];
+    }
+
     switch (type.$$typeof) {
       case REACT_LAZY_TYPE:
         {
@@ -1348,59 +1366,56 @@ function resolveModelToJSON(request, parent, key, value) {
     }
   }
 
-  if (value === null) {
-    return null;
+  if (value == null) {
+    return value;
   }
 
-  var moduleReference = getModuleReference(value);
-
-  if (moduleReference) {
-    var moduleKey = getModuleKey(moduleReference);
-    var writtenModules = request.writtenModules;
-    var existingId = writtenModules.get(moduleKey);
-
-    if (existingId !== undefined) {
-      if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
-        // If we're encoding the "type" of an element, we can refer
-        // to that by a lazy reference instead of directly since React
-        // knows how to deal with lazy values. This lets us suspend
-        // on this component rather than its parent until the code has
-        // loaded.
-        return serializeByRefID(existingId);
-      }
-
-      return serializeByValueID(existingId);
-    }
+  if (typeof value === 'object' || isModuleReference(value)) {
+    if (isModuleReference(value)) {
+      var moduleReference = value;
+      var moduleKey = getModuleKey(moduleReference);
+      var writtenModules = request.writtenModules;
+      var existingId = writtenModules.get(moduleKey);
+
+      if (existingId !== undefined) {
+        if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
+          // If we're encoding the "type" of an element, we can refer
+          // to that by a lazy reference instead of directly since React
+          // knows how to deal with lazy values. This lets us suspend
+          // on this component rather than its parent until the code has
+          // loaded.
+          return serializeByRefID(existingId);
+        }
 
-    try {
-      var moduleMetaData = resolveModuleMetaData(request.bundlerConfig, moduleReference);
-      request.pendingChunks++;
-      var moduleId = request.nextChunkId++;
-      emitModuleChunk(request, moduleId, moduleMetaData);
-      writtenModules.set(moduleKey, moduleId);
-
-      if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
-        // If we're encoding the "type" of an element, we can refer
-        // to that by a lazy reference instead of directly since React
-        // knows how to deal with lazy values. This lets us suspend
-        // on this component rather than its parent until the code has
-        // loaded.
-        return serializeByRefID(moduleId);
+        return serializeByValueID(existingId);
       }
 
-      return serializeByValueID(moduleId);
-    } catch (x) {
-      request.pendingChunks++;
+      try {
+        var moduleMetaData = resolveModuleMetaData(request.bundlerConfig, moduleReference);
+        request.pendingChunks++;
+        var moduleId = request.nextChunkId++;
+        emitModuleChunk(request, moduleId, moduleMetaData);
+        writtenModules.set(moduleKey, moduleId);
+
+        if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
+          // If we're encoding the "type" of an element, we can refer
+          // to that by a lazy reference instead of directly since React
+          // knows how to deal with lazy values. This lets us suspend
+          // on this component rather than its parent until the code has
+          // loaded.
+          return serializeByRefID(moduleId);
+        }
 
-      var _errorId = request.nextChunkId++;
+        return serializeByValueID(moduleId);
+      } catch (x) {
+        request.pendingChunks++;
 
-      emitErrorChunk(request, _errorId, x);
-      return serializeByValueID(_errorId);
-    }
-  }
+        var _errorId = request.nextChunkId++;
 
-  if (typeof value === 'object') {
-    if (value.$$typeof === REACT_PROVIDER_TYPE) {
+        emitErrorChunk(request, _errorId, x);
+        return serializeByValueID(_errorId);
+      }
+    } else if (value.$$typeof === REACT_PROVIDER_TYPE) {
       var providerKey = value._context._globalName;
       var writtenProviders = request.writtenProviders;
       var providerId = writtenProviders.get(key);
@@ -1429,7 +1444,7 @@ function resolveModelToJSON(request, parent, key, value) {
         // Verify that this is a simple plain object.
         if (objectName(value) !== 'Object') {
           error('Only plain objects can be passed to client components from server components. ' + 'Built-ins like %s are not supported. ' + 'Remove %s from these props: %s', objectName(value), describeKeyForErrorMessage(key), describeObjectForErrorMessage(parent));
-        } else if (!isSimpleObject(value)) {
+        } else if (typeof value === 'object' && !isSimpleObject(value)) {
           error('Only plain objects can be passed to client components from server components. ' + 'Classes or other objects with methods are not supported. ' + 'Remove %s from these props: %s', describeKeyForErrorMessage(key), describeObjectForErrorMessage(parent, key));
         } else if (Object.getOwnPropertySymbols) {
           var symbols = Object.getOwnPropertySymbols(value);
@@ -1738,6 +1753,9 @@ function renderToReadableStream(model, options, context) {
       startFlowing(request, controller);
     },
     cancel: function (reason) {}
+  }, // $FlowFixMe size() methods are not allowed on byte streams.
+  {
+    highWaterMark: 0
   });
   return stream;
 }