react-server-dom-webpack 18.3.0-next-594093496-20230209 → 18.3.0-next-55542bc73-20230210

package/cjs/react-server-dom-webpack-plugin.js

@@ -10,250 +10,11 @@
 
 'use strict';
 
-'use strict';
-
-var path = require('path');
-var url = require('url');
-var asyncLib = require('neo-async');
-var ModuleDependency = require('webpack/lib/dependencies/ModuleDependency');
-var NullDependency = require('webpack/lib/dependencies/NullDependency');
-var Template = require('webpack/lib/Template');
-var webpack = require('webpack');
-
-var isArrayImpl = Array.isArray; // eslint-disable-next-line no-redeclare
-
-function isArray(a) {
-  return isArrayImpl(a);
-}
-
-class ClientReferenceDependency extends ModuleDependency {
-  constructor(request) {
-    super(request);
-  }
-
-  get type() {
-    return 'client-reference';
-  }
-
-} // This is the module that will be used to anchor all client references to.
-// I.e. it will have all the client files as async deps from this point on.
-// We use the Flight client implementation because you can't get to these
-// without the client runtime so it's the first time in the loading sequence
-// you might want them.
-
-
-var clientImportName = 'react-server-dom-webpack/client';
-
-var clientFileName = require.resolve('../client');
-
-var PLUGIN_NAME = 'React Server Plugin';
-class ReactFlightWebpackPlugin {
-  constructor(options) {
-    this.clientReferences = void 0;
-    this.chunkName = void 0;
-    this.manifestFilename = void 0;
-
-    if (!options || typeof options.isServer !== 'boolean') {
-      throw new Error(PLUGIN_NAME + ': You must specify the isServer option as a boolean.');
-    }
-
-    if (options.isServer) {
-      throw new Error('TODO: Implement the server compiler.');
-    }
-
-    if (!options.clientReferences) {
-      this.clientReferences = [{
-        directory: '.',
-        recursive: true,
-        include: /\.(js|ts|jsx|tsx)$/
-      }];
-    } else if (typeof options.clientReferences === 'string' || !isArray(options.clientReferences)) {
-      this.clientReferences = [options.clientReferences];
-    } else {
-      // $FlowFixMe[incompatible-type] found when upgrading Flow
-      this.clientReferences = options.clientReferences;
-    }
-
-    if (typeof options.chunkName === 'string') {
-      this.chunkName = options.chunkName;
-
-      if (!/\[(index|request)\]/.test(this.chunkName)) {
-        this.chunkName += '[index]';
-      }
-    } else {
-      this.chunkName = 'client[index]';
-    }
-
-    this.manifestFilename = options.manifestFilename || 'react-client-manifest.json';
-  }
-
-  apply(compiler) {
-    var _this = this;
-
-    var resolvedClientReferences;
-    var clientFileNameFound = false; // Find all client files on the file system
-
-    compiler.hooks.beforeCompile.tapAsync(PLUGIN_NAME, function (_ref, callback) {
-      var contextModuleFactory = _ref.contextModuleFactory;
-      var contextResolver = compiler.resolverFactory.get('context', {});
-
-      _this.resolveAllClientFiles(compiler.context, contextResolver, compiler.inputFileSystem, contextModuleFactory, function (err, resolvedClientRefs) {
-        if (err) {
-          callback(err);
-          return;
-        }
-
-        resolvedClientReferences = resolvedClientRefs;
-        callback();
-      });
-    });
-    compiler.hooks.thisCompilation.tap(PLUGIN_NAME, function (compilation, _ref2) {
-      var normalModuleFactory = _ref2.normalModuleFactory;
-      compilation.dependencyFactories.set(ClientReferenceDependency, normalModuleFactory);
-      compilation.dependencyTemplates.set(ClientReferenceDependency, new NullDependency.Template()); // $FlowFixMe[missing-local-annot]
-
-      var handler = function (parser) {
-        // We need to add all client references as dependency of something in the graph so
-        // Webpack knows which entries need to know about the relevant chunks and include the
-        // map in their runtime. The things that actually resolves the dependency is the Flight
-        // client runtime. So we add them as a dependency of the Flight client runtime.
-        // Anything that imports the runtime will be made aware of these chunks.
-        parser.hooks.program.tap(PLUGIN_NAME, function () {
-          var module = parser.state.module;
-
-          if (module.resource !== clientFileName) {
-            return;
-          }
-
-          clientFileNameFound = true;
-
-          if (resolvedClientReferences) {
-            // $FlowFixMe[incompatible-use] found when upgrading Flow
-            for (var i = 0; i < resolvedClientReferences.length; i++) {
-              // $FlowFixMe[incompatible-use] found when upgrading Flow
-              var dep = resolvedClientReferences[i];
-
-              var chunkName = _this.chunkName.replace(/\[index\]/g, '' + i).replace(/\[request\]/g, Template.toPath(dep.userRequest));
-
-              var block = new webpack.AsyncDependenciesBlock({
-                name: chunkName
-              }, null, dep.request);
-              block.addDependency(dep);
-              module.addBlock(block);
-            }
-          }
-        });
-      };
-
-      normalModuleFactory.hooks.parser.for('javascript/auto').tap('HarmonyModulesPlugin', handler);
-      normalModuleFactory.hooks.parser.for('javascript/esm').tap('HarmonyModulesPlugin', handler);
-      normalModuleFactory.hooks.parser.for('javascript/dynamic').tap('HarmonyModulesPlugin', handler);
-    });
-    compiler.hooks.make.tap(PLUGIN_NAME, function (compilation) {
-      compilation.hooks.processAssets.tap({
-        name: PLUGIN_NAME,
-        stage: webpack.Compilation.PROCESS_ASSETS_STAGE_REPORT
-      }, function () {
-        if (clientFileNameFound === false) {
-          compilation.warnings.push(new webpack.WebpackError("Client runtime at " + clientImportName + " was not found. React Server Components module map file " + _this.manifestFilename + " was not created."));
-          return;
-        }
-
-        var json = {};
-        compilation.chunkGroups.forEach(function (chunkGroup) {
-          var chunkIds = chunkGroup.chunks.map(function (c) {
-            return c.id;
-          }); // $FlowFixMe[missing-local-annot]
-
-          function recordModule(id, module) {
-            // TODO: Hook into deps instead of the target module.
-            // That way we know by the type of dep whether to include.
-            // It also resolves conflicts when the same module is in multiple chunks.
-            if (!/\.(js|ts)x?$/.test(module.resource)) {
-              return;
-            }
-
-            var moduleProvidedExports = compilation.moduleGraph.getExportsInfo(module).getProvidedExports();
-            var moduleExports = {};
-            ['', '*'].concat(Array.isArray(moduleProvidedExports) ? moduleProvidedExports : []).forEach(function (name) {
-              moduleExports[name] = {
-                id: id,
-                chunks: chunkIds,
-                name: name
-              };
-            });
-            var href = url.pathToFileURL(module.resource).href;
-
-            if (href !== undefined) {
-              json[href] = moduleExports;
-            }
-          }
-
-          chunkGroup.chunks.forEach(function (chunk) {
-            var chunkModules = compilation.chunkGraph.getChunkModulesIterable(chunk);
-            Array.from(chunkModules).forEach(function (module) {
-              var moduleId = compilation.chunkGraph.getModuleId(module);
-              recordModule(moduleId, module); // If this is a concatenation, register each child to the parent ID.
-
-              if (module.modules) {
-                module.modules.forEach(function (concatenatedMod) {
-                  recordModule(moduleId, concatenatedMod);
-                });
-              }
-            });
-          });
-        });
-        var output = JSON.stringify(json, null, 2);
-        compilation.emitAsset(_this.manifestFilename, new webpack.sources.RawSource(output, false));
-      });
-    });
-  } // This attempts to replicate the dynamic file path resolution used for other wildcard
-  // resolution in Webpack is using.
-
-
-  resolveAllClientFiles(context, contextResolver, fs, contextModuleFactory, callback) {
-    asyncLib.map(this.clientReferences, function (clientReferencePath, cb) {
-      if (typeof clientReferencePath === 'string') {
-        cb(null, [new ClientReferenceDependency(clientReferencePath)]);
-        return;
-      }
-
-      var clientReferenceSearch = clientReferencePath;
-      contextResolver.resolve({}, context, clientReferencePath.directory, {}, function (err, resolvedDirectory) {
-        if (err) return cb(err);
-        var options = {
-          resource: resolvedDirectory,
-          resourceQuery: '',
-          recursive: clientReferenceSearch.recursive === undefined ? true : clientReferenceSearch.recursive,
-          regExp: clientReferenceSearch.include,
-          include: undefined,
-          exclude: clientReferenceSearch.exclude
-        };
-        contextModuleFactory.resolveDependencies(fs, options, function (err2, deps) {
-          if (err2) return cb(err2);
-          var clientRefDeps = deps.map(function (dep) {
-            // use userRequest instead of request. request always end with undefined which is wrong
-            var request = path.join(resolvedDirectory, dep.userRequest);
-            var clientRefDep = new ClientReferenceDependency(request);
-            clientRefDep.userRequest = dep.userRequest;
-            return clientRefDep;
-          });
-          cb(null, clientRefDeps);
-        });
-      });
-    }, function (err, result) {
-      if (err) return callback(err);
-      var flat = [];
-
-      for (var i = 0; i < result.length; i++) {
-        // $FlowFixMe[method-unbinding]
-        flat.push.apply(flat, result[i]);
-      }
-
-      callback(null, flat);
-    });
-  }
-
-}
-
-module.exports = ReactFlightWebpackPlugin;
+'use strict';var k=require("path"),l=require("url"),n=require("neo-async"),p=require("webpack/lib/dependencies/ModuleDependency"),q=require("webpack/lib/dependencies/NullDependency"),r=require("webpack/lib/Template"),t=require("webpack");const u=Array.isArray;class v extends p{constructor(a){super(a)}get type(){return"client-reference"}}const w=require.resolve("../client");
+class x{constructor(a){this.manifestFilename=this.chunkName=this.clientReferences=void 0;if(!a||"boolean"!==typeof a.isServer)throw Error("React Server Plugin: You must specify the isServer option as a boolean.");if(a.isServer)throw Error("TODO: Implement the server compiler.");a.clientReferences?"string"!==typeof a.clientReferences&&u(a.clientReferences)?this.clientReferences=a.clientReferences:this.clientReferences=[a.clientReferences]:this.clientReferences=[{directory:".",recursive:!0,include:/\.(js|ts|jsx|tsx)$/}];
+"string"===typeof a.chunkName?(this.chunkName=a.chunkName,/\[(index|request)\]/.test(this.chunkName)||(this.chunkName+="[index]")):this.chunkName="client[index]";this.manifestFilename=a.manifestFilename||"react-client-manifest.json"}apply(a){const e=this;let f,m=!1;a.hooks.beforeCompile.tapAsync("React Server Plugin",(c,b)=>{c=c.contextModuleFactory;const d=a.resolverFactory.get("context",{});e.resolveAllClientFiles(a.context,d,a.inputFileSystem,c,function(a,c){a?b(a):(f=c,b())})});a.hooks.thisCompilation.tap("React Server Plugin",
+(a,b)=>{b=b.normalModuleFactory;a.dependencyFactories.set(v,b);a.dependencyTemplates.set(v,new q.Template);a=a=>{a.hooks.program.tap("React Server Plugin",()=>{const b=a.state.module;if(b.resource===w&&(m=!0,f))for(let a=0;a<f.length;a++){const g=f[a];var c=e.chunkName.replace(/\[index\]/g,""+a).replace(/\[request\]/g,r.toPath(g.userRequest));c=new t.AsyncDependenciesBlock({name:c},null,g.request);c.addDependency(g);b.addBlock(c)}})};b.hooks.parser.for("javascript/auto").tap("HarmonyModulesPlugin",
+a);b.hooks.parser.for("javascript/esm").tap("HarmonyModulesPlugin",a);b.hooks.parser.for("javascript/dynamic").tap("HarmonyModulesPlugin",a)});a.hooks.make.tap("React Server Plugin",a=>{a.hooks.processAssets.tap({name:"React Server Plugin",stage:t.Compilation.PROCESS_ASSETS_STAGE_REPORT},function(){if(!1===m)a.warnings.push(new t.WebpackError("Client runtime at react-server-dom-webpack/client was not found. React Server Components module map file "+e.manifestFilename+" was not created."));else{var b=
+{};a.chunkGroups.forEach(function(c){function d(c,h){if(/\.(js|ts)x?$/.test(h.resource)){var d=a.moduleGraph.getExportsInfo(h).getProvidedExports(),g={};["","*"].concat(Array.isArray(d)?d:[]).forEach(function(a){g[a]={id:c,chunks:e,name:a}});h=l.pathToFileURL(h.resource).href;void 0!==h&&(b[h]=g)}}const e=c.chunks.map(function(a){return a.id});c.chunks.forEach(function(b){b=a.chunkGraph.getChunkModulesIterable(b);Array.from(b).forEach(function(b){const c=a.chunkGraph.getModuleId(b);d(c,b);b.modules&&
+b.modules.forEach(a=>{d(c,a)})})})});var c=JSON.stringify(b,null,2);a.emitAsset(e.manifestFilename,new t.sources.RawSource(c,!1))}})})}resolveAllClientFiles(a,e,f,m,c){n.map(this.clientReferences,(b,c)=>{"string"===typeof b?c(null,[new v(b)]):e.resolve({},a,b.directory,{},(a,d)=>{if(a)return c(a);m.resolveDependencies(f,{resource:d,resourceQuery:"",recursive:void 0===b.recursive?!0:b.recursive,regExp:b.include,include:void 0,exclude:b.exclude},(a,b)=>{if(a)return c(a);a=b.map(a=>{var b=k.join(d,a.userRequest);
+b=new v(b);b.userRequest=a.userRequest;return b});c(null,a)})})},(a,d)=>{if(a)return c(a);a=[];for(let b=0;b<d.length;b++)a.push.apply(a,d[b]);c(null,a)})}}module.exports=x;

package/cjs/react-server-dom-webpack-server.browser.development.js

@@ -200,21 +200,25 @@ function processReferenceChunk(request, id, reference) {
   var row = id.toString(16) + ':' + json + '\n';
   return stringToChunk(row);
 }
-function processModuleChunk(request, id, moduleMetaData) {
-  var json = stringify(moduleMetaData);
+function processImportChunk(request, id, clientReferenceMetadata) {
+  var json = stringify(clientReferenceMetadata);
   var row = serializeRowHeader('I', id) + json + '\n';
   return stringToChunk(row);
 }
 
 // eslint-disable-next-line no-unused-vars
 var CLIENT_REFERENCE_TAG = Symbol.for('react.client.reference');
+var SERVER_REFERENCE_TAG = Symbol.for('react.server.reference');
 function getClientReferenceKey(reference) {
   return reference.filepath + '#' + reference.name + (reference.async ? '#async' : '');
 }
 function isClientReference(reference) {
   return reference.$$typeof === CLIENT_REFERENCE_TAG;
 }
-function resolveModuleMetaData(config, clientReference) {
+function isServerReference(reference) {
+  return reference.$$typeof === SERVER_REFERENCE_TAG;
+}
+function resolveClientReferenceMetadata(config, clientReference) {
   var resolvedModuleData = config[clientReference.filepath][clientReference.name];
 
   if (clientReference.async) {
@@ -228,6 +232,13 @@ function resolveModuleMetaData(config, clientReference) {
     return resolvedModuleData;
   }
 }
+function resolveServerReferenceMetadata(config, serverReference) {
+  return {
+    id: serverReference.$$filepath,
+    name: serverReference.$$name,
+    bound: Promise.resolve(serverReference.$$bound)
+  };
+}
 
 // ATTENTION
 // When adding new symbols to this file,
@@ -552,7 +563,7 @@ function isArray(a) {
 // Run `yarn generate-inline-fizz-runtime` to generate.
 var clientRenderBoundary = '$RX=function(b,c,d,e){var a=document.getElementById(b);a&&(b=a.previousSibling,b.data="$!",a=a.dataset,c&&(a.dgst=c),d&&(a.msg=d),e&&(a.stck=e),b._reactRetry&&b._reactRetry())};';
 var completeBoundary = '$RC=function(b,c,e){c=document.getElementById(c);c.parentNode.removeChild(c);var a=document.getElementById(b);if(a){b=a.previousSibling;if(e)b.data="$!",a.setAttribute("data-dgst",e);else{e=b.parentNode;a=b.nextSibling;var f=0;do{if(a&&8===a.nodeType){var d=a.data;if("/$"===d)if(0===f)break;else f--;else"$"!==d&&"$?"!==d&&"$!"!==d||f++}d=a.nextSibling;e.removeChild(a);a=d}while(a);for(;c.firstChild;)e.insertBefore(c.firstChild,a);b.data="$"}b._reactRetry&&b._reactRetry()}};';
-var completeBoundaryWithStyles = '$RM=new Map;\n$RR=function(p,q,v){function r(l){this.s=l}for(var t=$RC,u=$RM,m=new Map,n=document,g,e,f=n.querySelectorAll("link[data-precedence],style[data-precedence]"),d=0;e=f[d++];)m.set(e.dataset.precedence,g=e);e=0;f=[];for(var c,h,b,a;c=v[e++];){var k=0;h=c[k++];if(b=u.get(h))"l"!==b.s&&f.push(b);else{a=n.createElement("link");a.href=h;a.rel="stylesheet";for(a.dataset.precedence=d=c[k++];b=c[k++];)a.setAttribute(b,c[k++]);b=a._p=new Promise(function(l,w){a.onload=l;a.onerror=w});b.then(r.bind(b,\n"l"),r.bind(b,"e"));u.set(h,b);f.push(b);c=m.get(d)||g;c===g&&(g=a);m.set(d,a);c?c.parentNode.insertBefore(a,c.nextSibling):(d=n.head,d.insertBefore(a,d.firstChild))}}Promise.all(f).then(t.bind(null,p,q,""),t.bind(null,p,q,"Resource failed to load"))};';
+var completeBoundaryWithStyles = '$RM=new Map;\n$RR=function(p,q,w){function r(l){this.s=l}for(var t=$RC,m=$RM,u=new Map,n=new Map,g=document,h,e,f=g.querySelectorAll("template[data-precedence]"),c=0;e=f[c++];){for(var b=e.content.firstChild;b;b=b.nextSibling)u.set(b.getAttribute("data-href"),b);e.parentNode.removeChild(e)}f=g.querySelectorAll("link[data-precedence],style[data-precedence]");for(c=0;e=f[c++];)m.set(e.getAttribute("STYLE"===e.nodeName?"data-href":"href"),e),n.set(e.dataset.precedence,h=e);e=0;f=[];for(var d,\nv,a;d=w[e++];){var k=0;b=d[k++];if(!(a=m.get(b))){if(a=u.get(b))c=a.getAttribute("data-precedence");else{a=g.createElement("link");a.href=b;a.rel="stylesheet";for(a.dataset.precedence=c=d[k++];v=d[k++];)a.setAttribute(v,d[k++]);d=a._p=new Promise(function(l,x){a.onload=l;a.onerror=x});d.then(r.bind(d,"l"),r.bind(d,"e"))}m.set(b,a);b=n.get(c)||h;b===h&&(h=a);n.set(c,a);b?b.parentNode.insertBefore(a,b.nextSibling):(c=g.head,c.insertBefore(a,c.firstChild))}d=a._p;c=a.getAttribute("media");!d||"l"===\nd.s||c&&!matchMedia(c).matches||f.push(d)}Promise.all(f).then(t.bind(null,p,q,""),t.bind(null,p,q,"Resource failed to load"))};';
 var completeSegment = '$RS=function(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 ReactDOMSharedInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
@@ -633,10 +644,10 @@ var completeSegmentScript2 = stringToPrecomputedChunk('","');
 var completeSegmentScriptEnd = stringToPrecomputedChunk('")</script>');
 var completeSegmentData1 = stringToPrecomputedChunk('<template data-rsi="" data-sid="');
 var completeSegmentData2 = stringToPrecomputedChunk('" data-pid="');
-var completeBoundaryScript1Full = stringToPrecomputedChunk(completeBoundary + ';$RC("');
+var completeBoundaryScript1Full = stringToPrecomputedChunk(completeBoundary + '$RC("');
 var completeBoundaryScript1Partial = stringToPrecomputedChunk('$RC("');
-var completeBoundaryWithStylesScript1FullBoth = stringToPrecomputedChunk(completeBoundary + ';' + completeBoundaryWithStyles + ';$RR("');
-var completeBoundaryWithStylesScript1FullPartial = stringToPrecomputedChunk(completeBoundaryWithStyles + ';$RR("');
+var completeBoundaryWithStylesScript1FullBoth = stringToPrecomputedChunk(completeBoundary + completeBoundaryWithStyles + '$RR("');
+var completeBoundaryWithStylesScript1FullPartial = stringToPrecomputedChunk(completeBoundaryWithStyles + '$RR("');
 var completeBoundaryWithStylesScript1Partial = stringToPrecomputedChunk('$RR("');
 var completeBoundaryScript2 = stringToPrecomputedChunk('","');
 var completeBoundaryScript3a = stringToPrecomputedChunk('",');
@@ -656,6 +667,8 @@ var clientRenderData2 = stringToPrecomputedChunk('" data-dgst="');
 var clientRenderData3 = stringToPrecomputedChunk('" data-msg="');
 var clientRenderData4 = stringToPrecomputedChunk('" data-stck="');
 
+var styleTagTemplateOpen = stringToPrecomputedChunk('<template data-precedence="">');
+var styleTagTemplateClose = stringToPrecomputedChunk('</template>'); // Tracks whether we wrote any late style tags. We use this to determine
 var precedencePlaceholderStart = stringToPrecomputedChunk('<style data-precedence="');
 var precedencePlaceholderEnd = stringToPrecomputedChunk('"></style>');
 
@@ -1182,11 +1195,12 @@ function createRequest(model, bundlerConfig, onError, context, identifierPrefix)
     pendingChunks: 0,
     abortableTasks: abortSet,
     pingedTasks: pingedTasks,
-    completedModuleChunks: [],
+    completedImportChunks: [],
     completedJSONChunks: [],
     completedErrorChunks: [],
     writtenSymbols: new Map(),
-    writtenModules: new Map(),
+    writtenClientReferences: new Map(),
+    writtenServerReferences: new Map(),
     writtenProviders: new Map(),
     identifierPrefix: identifierPrefix || '',
     identifierCount: 1,
@@ -1497,6 +1511,10 @@ function serializePromiseID(id) {
   return '$@' + id.toString(16);
 }
 
+function serializeServerReferenceID(id) {
+  return '$F' + id.toString(16);
+}
+
 function serializeSymbolReference(name) {
   return '$S' + name;
 }
@@ -1505,10 +1523,10 @@ function serializeProviderReference(name) {
   return '$P' + name;
 }
 
-function serializeClientReference(request, parent, key, moduleReference) {
-  var moduleKey = getClientReferenceKey(moduleReference);
-  var writtenModules = request.writtenModules;
-  var existingId = writtenModules.get(moduleKey);
+function serializeClientReference(request, parent, key, clientReference) {
+  var clientReferenceKey = getClientReferenceKey(clientReference);
+  var writtenClientReferences = request.writtenClientReferences;
+  var existingId = writtenClientReferences.get(clientReferenceKey);
 
   if (existingId !== undefined) {
     if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
@@ -1524,11 +1542,11 @@ function serializeClientReference(request, parent, key, moduleReference) {
   }
 
   try {
-    var moduleMetaData = resolveModuleMetaData(request.bundlerConfig, moduleReference);
+    var clientReferenceMetadata = resolveClientReferenceMetadata(request.bundlerConfig, clientReference);
     request.pendingChunks++;
-    var moduleId = request.nextChunkId++;
-    emitModuleChunk(request, moduleId, moduleMetaData);
-    writtenModules.set(moduleKey, moduleId);
+    var importId = request.nextChunkId++;
+    emitImportChunk(request, importId, clientReferenceMetadata);
+    writtenClientReferences.set(clientReferenceKey, importId);
 
     if (parent[0] === REACT_ELEMENT_TYPE && key === '1') {
       // If we're encoding the "type" of an element, we can refer
@@ -1536,10 +1554,10 @@ function serializeClientReference(request, parent, key, moduleReference) {
       // knows how to deal with lazy values. This lets us suspend
       // on this component rather than its parent until the code has
       // loaded.
-      return serializeLazyID(moduleId);
+      return serializeLazyID(importId);
     }
 
-    return serializeByValueID(moduleId);
+    return serializeByValueID(importId);
   } catch (x) {
     request.pendingChunks++;
     var errorId = request.nextChunkId++;
@@ -1557,6 +1575,24 @@ function serializeClientReference(request, parent, key, moduleReference) {
   }
 }
 
+function serializeServerReference(request, parent, key, serverReference) {
+  var writtenServerReferences = request.writtenServerReferences;
+  var existingId = writtenServerReferences.get(serverReference);
+
+  if (existingId !== undefined) {
+    return serializeServerReferenceID(existingId);
+  }
+
+  var serverReferenceMetadata = resolveServerReferenceMetadata(request.bundlerConfig, serverReference);
+  request.pendingChunks++;
+  var metadataId = request.nextChunkId++; // We assume that this object doesn't suspend.
+
+  var processedChunk = processModelChunk(request, metadataId, serverReferenceMetadata);
+  request.completedJSONChunks.push(processedChunk);
+  writtenServerReferences.set(serverReference, metadataId);
+  return serializeServerReferenceID(metadataId);
+}
+
 function escapeStringValue(value) {
   if (value[0] === '$') {
     // We need to escape $ or @ prefixed strings since we use those to encode
@@ -1985,7 +2021,7 @@ function resolveModelToJSON(request, parent, key, value) {
 
   if (typeof value === 'object') {
     if (isClientReference(value)) {
-      return serializeClientReference(request, parent, key, value);
+      return serializeClientReference(request, parent, key, value); // $FlowFixMe[method-unbinding]
     } else if (typeof value.then === 'function') {
       // 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.
@@ -2049,10 +2085,14 @@ function resolveModelToJSON(request, parent, key, value) {
       return serializeClientReference(request, parent, key, value);
     }
 
+    if (isServerReference(value)) {
+      return serializeServerReference(request, parent, key, value);
+    }
+
     if (/^on[A-Z]/.test(key)) {
       throw new Error('Event handlers cannot be passed to Client Component props.' + describeObjectForErrorMessage(parent, key) + '\nIf you need interactivity, consider converting part of this to a Client Component.');
     } else {
-      throw new Error('Functions cannot be passed directly to Client Components ' + "because they're not serializable." + describeObjectForErrorMessage(parent, key));
+      throw new Error('Functions cannot be passed directly to Client Components ' + 'unless you explicitly expose it by marking it with "use server".' + describeObjectForErrorMessage(parent, key));
     }
   }
 
@@ -2144,15 +2184,15 @@ function emitErrorChunkDev(request, id, digest, message, stack) {
   request.completedErrorChunks.push(processedChunk);
 }
 
-function emitModuleChunk(request, id, moduleMetaData) {
-  var processedChunk = processModuleChunk(request, id, moduleMetaData);
-  request.completedModuleChunks.push(processedChunk);
+function emitImportChunk(request, id, clientReferenceMetadata) {
+  var processedChunk = processImportChunk(request, id, clientReferenceMetadata);
+  request.completedImportChunks.push(processedChunk);
 }
 
 function emitSymbolChunk(request, id, name) {
   var symbolReference = serializeSymbolReference(name);
   var processedChunk = processReferenceChunk(request, id, symbolReference);
-  request.completedModuleChunks.push(processedChunk);
+  request.completedImportChunks.push(processedChunk);
 }
 
 function emitProviderChunk(request, id, contextName) {
@@ -2275,12 +2315,12 @@ function flushCompletedChunks(request, destination) {
   try {
     // We emit module chunks first in the stream so that
     // they can be preloaded as early as possible.
-    var moduleChunks = request.completedModuleChunks;
+    var importsChunks = request.completedImportChunks;
     var i = 0;
 
-    for (; i < moduleChunks.length; i++) {
+    for (; i < importsChunks.length; i++) {
       request.pendingChunks--;
-      var chunk = moduleChunks[i];
+      var chunk = importsChunks[i];
       var keepWriting = writeChunkAndReturn(destination, chunk);
 
       if (!keepWriting) {
@@ -2290,7 +2330,7 @@ function flushCompletedChunks(request, destination) {
       }
     }
 
-    moduleChunks.splice(0, i); // Next comes model data.
+    importsChunks.splice(0, i); // Next comes model data.
 
     var jsonChunks = request.completedJSONChunks;
     i = 0;