diff --git a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts index 2e958cb510ef2..5c8bda6d0c4f4 100644 --- a/packages/next/build/webpack/plugins/flight-manifest-plugin.ts +++ b/packages/next/build/webpack/plugins/flight-manifest-plugin.ts @@ -82,15 +82,15 @@ export class FlightManifestPlugin { } const moduleExports: any = manifest[resource] || {} - const moduleIdMapping: any = manifest.__ssr_module_id__ || {} + const moduleIdMapping: any = manifest.__ssr_module_mapping__ || {} + moduleIdMapping[id] = moduleIdMapping[id] || {} // Note that this isn't that reliable as webpack is still possible to assign // additional queries to make sure there's no conflict even using the `named` // module ID strategy. - const ssrNamedModuleId = relative(context, mod.resourceResolveData.path) - moduleIdMapping[id] = ssrNamedModuleId.startsWith('.') - ? ssrNamedModuleId - : `./${ssrNamedModuleId}` + let ssrNamedModuleId = relative(context, mod.resourceResolveData.path) + if (!ssrNamedModuleId.startsWith('.')) + ssrNamedModuleId = `./${ssrNamedModuleId}` const exportsInfo = compilation.moduleGraph.getExportsInfo(mod) const cjsExports = [ @@ -143,10 +143,16 @@ export class FlightManifestPlugin { : [], } } + if (!moduleIdMapping[id][name]) { + moduleIdMapping[id][name] = { + ...moduleExports[name], + id: ssrNamedModuleId, + } + } }) manifest[resource] = moduleExports - manifest.__ssr_module_id__ = moduleIdMapping + manifest.__ssr_module_mapping__ = moduleIdMapping } chunkGroup.chunks.forEach((chunk: any) => { diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js index 948d711b64078..b1dc9903bcb31 100644 --- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js +++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js @@ -502,7 +502,7 @@ var startInlineScript = stringToPrecomputedChunk(''); var startScriptSrc = stringToPrecomputedChunk(''); // Allows us to keep track of what we've already written so we can refer back to it. +var endAsyncScript = stringToPrecomputedChunk('" async="">'); var textSeparator = stringToPrecomputedChunk(''); @@ -537,6 +537,10 @@ var startPendingSuspenseBoundary1 = stringToPrecomputedChunk(''); var startClientRenderedSuspenseBoundary = stringToPrecomputedChunk(''); var endSuspenseBoundary = stringToPrecomputedChunk(''); +var clientRenderedSuspenseBoundaryError1 = stringToPrecomputedChunk(''); var startSegmentHTML = stringToPrecomputedChunk(''); @@ -566,7 +570,7 @@ var endSegmentColGroup = stringToPrecomputedChunk(''); // 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) { @@ -578,6 +582,11 @@ var endSegmentColGroup = stringToPrecomputedChunk(''); // 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(); @@ -661,7 +670,7 @@ var endSegmentColGroup = stringToPrecomputedChunk(''); 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('","'); @@ -672,7 +681,9 @@ var completeBoundaryScript2 = stringToPrecomputedChunk('","'); var completeBoundaryScript3 = stringToPrecomputedChunk('")'); var clientRenderScript1Full = stringToPrecomputedChunk(clientRenderFunction + ';$RX("'); var clientRenderScript1Partial = stringToPrecomputedChunk('$RX("'); -var clientRenderScript2 = stringToPrecomputedChunk('")'); +var clientRenderScript1A = stringToPrecomputedChunk('"'); +var clientRenderScript2 = stringToPrecomputedChunk(')'); +var clientRenderErrorScriptArgInterstitial = stringToPrecomputedChunk(','); var rendererSigil; @@ -864,6 +875,14 @@ function readContext(context) { return value; } +var currentRequest = null; +function prepareToUseHooksForRequest(request) { + currentRequest = request; +} +function resetHooksForRequest() { + currentRequest = null; +} + function readContext$1(context) { { if (context.$$typeof !== REACT_SERVER_CONTEXT_TYPE) { @@ -912,7 +931,7 @@ var Dispatcher = { useLayoutEffect: unsupportedHook, useImperativeHandle: unsupportedHook, useEffect: unsupportedHook, - useId: unsupportedHook, + useId: useId, useMutableSource: unsupportedHook, useSyncExternalStore: unsupportedHook, useCacheRefresh: function () { @@ -939,6 +958,16 @@ function getCurrentCache() { return currentCache; } +function useId() { + if (currentRequest === null) { + throw new Error('useId can only be used while React is rendering'); + } + + var id = currentRequest.identifierCount++; // use 'S' for Flight components to distinguish from 'R' and 'r' in Fizz/Client + + return ':' + currentRequest.identifierPrefix + 'S' + id.toString(32) + ':'; +} + var ContextRegistry = ReactSharedInternals.ContextRegistry; function getOrCreateServerContext(globalName) { if (!ContextRegistry[globalName]) { @@ -957,7 +986,7 @@ function defaultErrorHandler(error) { var OPEN = 0; var CLOSING = 1; var CLOSED = 2; -function createRequest(model, bundlerConfig, onError, context) { +function createRequest(model, bundlerConfig, onError, context, identifierPrefix) { var pingedSegments = []; var request = { status: OPEN, @@ -974,6 +1003,8 @@ function createRequest(model, bundlerConfig, onError, context) { writtenSymbols: new Map(), writtenModules: new Map(), writtenProviders: new Map(), + identifierPrefix: identifierPrefix || '', + identifierCount: 1, onError: onError === undefined ? defaultErrorHandler : onError, toJSON: function (key, value) { return resolveModelToJSON(request, this, key, value); @@ -1581,6 +1612,7 @@ function performWork(request) { var prevCache = getCurrentCache(); ReactCurrentDispatcher.current = Dispatcher; setCurrentCache(request.cache); + prepareToUseHooksForRequest(request); try { var pingedSegments = request.pingedSegments; @@ -1600,6 +1632,7 @@ function performWork(request) { } finally { ReactCurrentDispatcher.current = prevDispatcher; setCurrentCache(prevCache); + resetHooksForRequest(); } } @@ -1725,8 +1758,8 @@ function importServerContexts(contexts) { return rootContextSnapshot; } -function renderToReadableStream(model, webpackMap, options, context) { - var request = createRequest(model, webpackMap, options ? options.onError : undefined, context); +function renderToReadableStream(model, webpackMap, options) { + var request = createRequest(model, webpackMap, options ? options.onError : undefined, options ? options.context : undefined, options ? options.identifierPrefix : undefined); var stream = new ReadableStream({ type: 'bytes', start: function (controller) { @@ -1736,6 +1769,9 @@ function renderToReadableStream(model, webpackMap, options, context) { startFlowing(request, controller); }, cancel: function (reason) {} + }, // $FlowFixMe size() methods are not allowed on byte streams. + { + highWaterMark: 0 }); return stream; } diff --git a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js index bb235427138f6..1a013d84b6ea5 100644 --- a/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js +++ b/packages/next/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.production.min.server.js @@ -7,7 +7,7 @@ * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. */ -'use strict';var e=require("react"),k=null,m=0;function n(a,b){if(0!==b.length)if(512