You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
const Pokemon = ({ params }) => {
const name = params.name
return <span>The pokemon is: {name}</span>
}
This causes next.js to log this error to my server console, though it currently works anyway:
Error: Route "/pokemon/[name]" used `params.name`. `params` should be awaited before using its properties.
The error is also returned as part of the RSC payload if it happens during a client-side page transition. Presumably so that it can be emitted in the browser console as well (which it is). This error in the response payload causes the rsc-parser to fail with this error:
Failed to read a RSC payload created by a development version of React on the server while using a production version on the client. Always use matching versions on the server and the client.
This is definitely not a correct failure, as I am running the next.js dev server on my local machine. I'm not mismatching dev and prod mode. I can see that the extension is checking process.env.NODE_ENV === 'development' and if this condition is not true then it throws the above error if there any 87 / "W" entries in the RSC payload. That NODE_ENV check is failing in this case I guess.
If I fix the error in my code (by doing (await params).name, then the error disappears from the RSC response payload, and the parser processes it successfully.
I'm running next.js 15.1.0, and 6.0.1 (10/15/2024) of the RSC dev tools. Here is the full raw payload which is causing the parser to fail:
1:"$Sreact.fragment"
2:I["[project]/node_modules/next/dist/client/components/layout-router.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"default"]
3:I["[project]/node_modules/next/dist/client/components/render-from-template-context.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"default"]
7:I["[project]/node_modules/next/dist/lib/metadata/metadata-boundary.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"OutletBoundary"]
b:I["[project]/node_modules/next/dist/client/components/client-page.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"ClientPageRoot"]
c:I["[project]/node_modules/next/dist/client/components/client-segment.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"ClientSegmentRoot"]
d:I["[project]/node_modules/next/dist/client/components/error-boundary.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"default"]
e:I["[project]/node_modules/next/dist/client/components/http-access-fallback/error-boundary.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"HTTPAccessFallbackBoundary"]
f:I["[project]/node_modules/next/dist/lib/metadata/metadata-boundary.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"MetadataBoundary"]
10:I["[project]/node_modules/next/dist/lib/metadata/metadata-boundary.js [app-client] (ecmascript)",["static/chunks/_a91c21._.js","static/chunks/src_app_favicon_ico_mjs_ddfdf0._.js"],"ViewportBoundary"]
11:"$SkResourceStore"
5:{"name":"PokemonPage","env":"Server","key":null,"owner":null,"props":{"params":"$@","searchParams":"$@"}}
4:D"$5"
6:{"message":"Route \"/pokemon/[name]\" used `params.name`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis","stack":[["PokemonPage","/Users/cam/code/bigw/rsc-spike/.next/server/chunks/ssr/_a95409._.js",94,78]],"env":"Server"}
:W["warn",[["PokemonPage","/Users/cam/code/bigw/rsc-spike/.next/server/chunks/ssr/_a95409._.js",94,78]],"$5","Server","$Z6"]
9:{"name":"__next_outlet_boundary__","env":"Server","key":null,"owner":null,"props":{"ready":"$E(async function getMetadataAndViewportReady() {\n await viewport();\n await metadata();\n return undefined;\n })"}}
8:D"$9"
12:{"name":"NonIndex","env":"Server","key":null,"owner":null,"props":{"ctx":{"componentMod":{"ClientPageRoot":"$b","ClientSegmentRoot":"$c","GlobalError":"$d","HTTPAccessFallbackBoundary":"$e","LayoutRouter":"$2","MetadataBoundary":"$f","OutletBoundary":"$7","Postpone":"$E(function Postpone({ reason, route }) {\n const prerenderStore = __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workUnitAsyncStorage\"].getStore();\n const dynamicTracking = prerenderStore && prerenderStore.type === 'prerender-ppr' ? prerenderStore.dynamicTracking : null;\n postponeWithTracking(route, reason, dynamicTracking);\n})","RenderFromTemplateContext":"$3","ViewportBoundary":"$10","__next_app__":{"require":"$E(function () { [native code] })","loadChunk":"$E(function () { [native code] })"},"actionAsyncStorage":{"kResourceStore":"$11","enabled":true},"collectSegmentData":"$E(async function collectSegmentData(fullPageDataBuffer, staleTime, clientModules, serverConsumerManifest) {\n // Traverse the router tree and generate a prefetch response for each segment.\n // A mutable map to collect the results as we traverse the route tree.\n const resultMap = new Map();\n // Before we start, warm up the module cache by decoding the page data once.\n // Then we can assume that any remaining async tasks that occur the next time\n // are due to hanging promises caused by dynamic data access. Note we only\n // have to do this once per page, not per individual segment.\n //\n try {\n await (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$compiled$2f$react$2d$server$2d$dom$2d$turbopack$2f$client$2e$edge$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"createFromReadableStream\"])((0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$stream$2d$utils$2f$node$2d$web$2d$streams$2d$helper$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"streamFromBuffer\"])(fullPageDataBuffer), {\n serverConsumerManifest\n });\n await (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$lib$2f$scheduler$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"waitAtLeastOneReactRenderTask\"])();\n } catch {}\n // Create an abort controller that we'll use to stop the stream.\n const abortController = new AbortController();\n const onCompletedProcessingRouteTree = async ()=>{\n // Since all we're doing is decoding and re-encoding a cached prerender, if\n // serializing the stream takes longer than a microtask, it must because of\n // hanging promises caused by dynamic data.\n await (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$lib$2f$scheduler$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"waitAtLeastOneReactRenderTask\"])();\n abortController.abort();\n };\n // Generate a stream for the route tree prefetch. While we're walking the\n // tree, we'll also spawn additional tasks to generate the segment prefetches.\n // The promises for these tasks are pushed to a mutable array that we will\n // await once the route tree is fully rendered.\n const segmentTasks = [];\n const { prelude: treeStream } = await (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$server$2d$dom$2d$turbopack$2d$static$2d$edge$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"prerender\"])(// we need to use a component so that when we decode the original stream\n // inside of it, the side effects are transferred to the new stream.\n // @ts-expect-error\n /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$jsx$2d$runtime$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"jsx\"])(PrefetchTreeData, {\n fullPageDataBuffer: fullPageDataBuffer,\n serverConsumerManifest: serverConsumerManifest,\n clientModules: clientModules,\n staleTime: staleTime,\n segmentTasks: segmentTasks,\n onCompletedProcessingRouteTree: onCompletedProcessingRouteTree\n }), clientModules, {\n signal: abortController.signal,\n onError () {\n // Ignore any errors. These would have already been reported when\n // we created the full page data.\n }\n });\n // Write the route tree to a special `/_tree` segment.\n const treeBuffer = await (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$stream$2d$utils$2f$node$2d$web$2d$streams$2d$helper$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"streamToBuffer\"])(treeStream);\n resultMap.set('/_tree', treeBuffer);\n // Now that we've finished rendering the route tree, all the segment tasks\n // should have been spawned. Await them in parallel and write the segment\n // prefetches to the result map.\n for (const [segmentPath, buffer] of (await Promise.all(segmentTasks))){\n resultMap.set(segmentPath, buffer);\n }\n return resultMap;\n})","createMetadataComponents":"$E(function createMetadataComponents({ tree, searchParams, metadataContext, getDynamicParamFromSegment, appUsingSizeAdjustment, errorType, createServerParamsForMetadata, workStore, MetadataBoundary, ViewportBoundary }) {\n function MetadataRoot() {\n return /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$jsx$2d$runtime$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"jsxs\"])(__TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$jsx$2d$runtime$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"Fragment\"], {\n children: [\n /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$jsx$2d$runtime$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"jsx\"])(MetadataBoundary, {\n children: /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$jsx$2d$runtime$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"jsx\"])(Metadata, {})\n }),\n /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$jsx$2d$runtime$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"jsx\"])(ViewportBoundary, {\n children: /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$jsx$2d$runtime$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"jsx\"])(Viewport, {})\n }),\n appUsingSizeAdjustment ? /*#__PURE__*/ (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$jsx$2d$runtime$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"jsx\"])(\"meta\", {\n name: \"next-size-adjust\",\n content: \"\"\n }) : null\n ]\n });\n }\n async function viewport() {\n return getResolvedViewport(tree, searchParams, getDynamicParamFromSegment, createServerParamsForMetadata, workStore, errorType);\n }\n async function Viewport() {\n try {\n return await viewport();\n } catch (error) {\n if (!errorType && (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$client$2f$components$2f$http$2d$access$2d$fallback$2f$http$2d$access$2d$fallback$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"isHTTPAccessFallbackError\"])(error)) {\n try {\n return await getNotFoundViewport(tree, searchParams, getDynamicParamFromSegment, createServerParamsForMetadata, workStore);\n } catch {}\n }\n // We don't actually want to error in this component. We will\n // also error in the MetadataOutlet which causes the error to\n // bubble from the right position in the page to be caught by the\n // appropriate boundaries\n return null;\n }\n }\n Viewport.displayName = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$lib$2f$metadata$2f$metadata$2d$constants$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"VIEWPORT_BOUNDARY_NAME\"];\n async function metadata() {\n return getResolvedMetadata(tree, searchParams, getDynamicParamFromSegment, metadataContext, createServerParamsForMetadata, workStore, errorType);\n }\n async function Metadata() {\n try {\n return await metadata();\n } catch (error) {\n if (!errorType && (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$client$2f$components$2f$http$2d$access$2d$fallback$2f$http$2d$access$2d$fallback$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"isHTTPAccessFallbackError\"])(error)) {\n try {\n return await getNotFoundMetadata(tree, searchParams, getDynamicParamFromSegment, metadataContext, createServerParamsForMetadata, workStore);\n } catch {}\n }\n // We don't actually want to error in this component. We will\n // also error in the MetadataOutlet which causes the error to\n // bubble from the right position in the page to be caught by the\n // appropriate boundaries\n return null;\n }\n }\n Metadata.displayName = __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$lib$2f$metadata$2f$metadata$2d$constants$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"METADATA_BOUNDARY_NAME\"];\n async function getMetadataAndViewportReady() {\n await viewport();\n await metadata();\n return undefined;\n }\n return [\n MetadataRoot,\n getMetadataAndViewportReady\n ];\n})","createPrerenderParamsForClientSegment":"$E(function createPrerenderParamsForClientSegment(underlyingParams, workStore) {\n const prerenderStore = __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workUnitAsyncStorage\"].getStore();\n if (prerenderStore && prerenderStore.type === 'prerender') {\n const fallbackParams = workStore.fallbackRouteParams;\n if (fallbackParams) {\n for(let key in underlyingParams){\n if (fallbackParams.has(key)) {\n // This params object has one of more fallback params so we need to consider\n // the awaiting of this params object \"dynamic\". Since we are in dynamicIO mode\n // we encode this as a promise that never resolves\n return (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$dynamic$2d$rendering$2d$utils$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"makeHangingPromise\"])(prerenderStore.renderSignal, '`params`');\n }\n }\n }\n }\n // We're prerendering in a mode that does not abort. We resolve the promise without\n // any tracking because we're just transporting a value from server to client where the tracking\n // will be applied.\n return Promise.resolve(underlyingParams);\n})","createPrerenderSearchParamsForClientPage":"$E(function createPrerenderSearchParamsForClientPage(workStore) {\n if (workStore.forceStatic) {\n // When using forceStatic we override all other logic and always just return an empty\n // dictionary object.\n return Promise.resolve({});\n }\n const prerenderStore = __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workUnitAsyncStorage\"].getStore();\n if (prerenderStore && prerenderStore.type === 'prerender') {\n // dynamicIO Prerender\n // We're prerendering in a mode that aborts (dynamicIO) and should stall\n // the promise to ensure the RSC side is considered dynamic\n return (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$dynamic$2d$rendering$2d$utils$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"makeHangingPromise\"])(prerenderStore.renderSignal, '`searchParams`');\n }\n // We're prerendering in a mode that does not aborts. We resolve the promise without\n // any tracking because we're just transporting a value from server to client where the tracking\n // will be applied.\n return Promise.resolve({});\n})","createServerParamsForMetadata":"$E(function createServerParamsForServerSegment(underlyingParams, workStore) {\n const workUnitStore = __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workUnitAsyncStorage\"].getStore();\n if (workUnitStore) {\n switch(workUnitStore.type){\n case 'prerender':\n case 'prerender-ppr':\n case 'prerender-legacy':\n return createPrerenderParams(underlyingParams, workStore, workUnitStore);\n default:\n }\n }\n return createRenderParams(underlyingParams, workStore);\n})","createServerParamsForServerSegment":"$E(function createServerParamsForServerSegment(underlyingParams, workStore) {\n const workUnitStore = __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workUnitAsyncStorage\"].getStore();\n if (workUnitStore) {\n switch(workUnitStore.type){\n case 'prerender':\n case 'prerender-ppr':\n case 'prerender-legacy':\n return createPrerenderParams(underlyingParams, workStore, workUnitStore);\n default:\n }\n }\n return createRenderParams(underlyingParams, workStore);\n})","createServerSearchParamsForMetadata":"$E(function createServerSearchParamsForServerPage(underlyingSearchParams, workStore) {\n const workUnitStore = __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workUnitAsyncStorage\"].getStore();\n if (workUnitStore) {\n switch(workUnitStore.type){\n case 'prerender':\n case 'prerender-ppr':\n case 'prerender-legacy':\n return createPrerenderSearchParams(workStore, workUnitStore);\n default:\n }\n }\n return createRenderSearchParams(underlyingSearchParams, workStore);\n})","createServerSearchParamsForServerPage":"$E(function createServerSearchParamsForServerPage(underlyingSearchParams, workStore) {\n const workUnitStore = __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workUnitAsyncStorage\"].getStore();\n if (workUnitStore) {\n switch(workUnitStore.type){\n case 'prerender':\n case 'prerender-ppr':\n case 'prerender-legacy':\n return createPrerenderSearchParams(workStore, workUnitStore);\n default:\n }\n }\n return createRenderSearchParams(underlyingSearchParams, workStore);\n})","createTemporaryReferenceSet":"$E(function(){return new WeakMap})","decodeAction":"$E(function(body,serverManifest){var formData=new FormData,action=null;return body.forEach(function(value1,key){key.startsWith(\"$ACTION_\")?key.startsWith(\"$ACTION_REF_\")?(value1=decodeBoundActionMetaData(body,serverManifest,value1=\"$ACTION_\"+key.slice(12)+\":\"),action=loadServerReference(serverManifest,value1.id,value1.bound)):key.startsWith(\"$ACTION_ID_\")&&(action=loadServerReference(serverManifest,value1=key.slice(11),null)):formData.append(key,value1)}),null===action?null:action.then(function(fn){return fn.bind(null,formData)})})","decodeFormState":"$E(function(actionResult,body,serverManifest){var keyPath=body.get(\"$ACTION_KEY\");if(\"string\"!=typeof keyPath)return Promise.resolve(null);var metaData=null;if(body.forEach(function(value1,key){key.startsWith(\"$ACTION_REF_\")&&(metaData=decodeBoundActionMetaData(body,serverManifest,\"$ACTION_\"+key.slice(12)+\":\"))}),null===metaData)return Promise.resolve(null);var referenceId=metaData.id;return Promise.resolve(metaData.bound).then(function(bound){return null===bound?null:[actionResult,keyPath,referenceId,bound.length-1]})})","decodeReply":"$E(function(body,turbopackMap,options){if(\"string\"==typeof body){var form=new FormData;form.append(\"0\",body),body=form}return turbopackMap=getChunk(body=createResponse(turbopackMap,\"\",options?options.temporaryReferences:void 0,body),0),close(body),turbopackMap})","pages":["[project]/src/app/pokemon/[name]/page.tsx"],"patchFetch":"$E(function patchFetch() {\n return (0, __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$esm$2f$server$2f$lib$2f$patch$2d$fetch$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"patchFetch\"])({\n workAsyncStorage: __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workAsyncStorage\"],\n workUnitAsyncStorage: __TURBOPACK__imported__module__$5b$externals$5d2f$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js__$5b$external$5d$__$28$next$2f$dist$2f$server$2f$app$2d$render$2f$work$2d$unit$2d$async$2d$storage$2e$external$2e$js$2c$__cjs$29$__[\"workUnitAsyncStorage\"]\n });\n})","preconnect":"$E(function preconnect(href, crossOrigin, nonce) {\n const opts = {};\n if (typeof crossOrigin === 'string') {\n opts.crossOrigin = crossOrigin;\n }\n if (typeof nonce === 'string') {\n opts.nonce = nonce;\n }\n ;\n __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$dom$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"default\"].preconnect(href, opts);\n})","preloadFont":"$E(function preloadFont(href, type, crossOrigin, nonce) {\n const opts = {\n as: 'font',\n type\n };\n if (typeof crossOrigin === 'string') {\n opts.crossOrigin = crossOrigin;\n }\n if (typeof nonce === 'string') {\n opts.nonce = nonce;\n }\n __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$dom$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"default\"].preload(href, opts);\n})","preloadStyle":"$E(function preloadStyle(href, crossOrigin, nonce) {\n const opts = {\n as: 'style'\n };\n if (typeof crossOrigin === 'string') {\n opts.crossOrigin = crossOrigin;\n }\n if (typeof nonce === 'string') {\n opts.nonce = nonce;\n }\n __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$dist$2f$server$2f$route$2d$modules$2f$app$2d$page$2f$vendored$2f$rsc$2f$react$2d$dom$2e$js__$5b$app$2d$rsc$5d$__$28$ecmascript$29$__[\"default\"].preload(href, opts);\n})","prerender":"$undefined","renderToReadableStream":"$E(function(model,turbopackMap,options){var request=new RequestInstance(20,model,turbopackMap,options?options.onError:void 0,options?options.identifierPrefix:void 0,options?options.onPostpone:void 0,options?options.temporaryReferences:void 0,options?options.environmentName:void 0,options?options.filterStackFrame:void 0,noop,noop);if(options&&options.signal){var signal=options.signal;if(signal.aborted)abort(request,signal.reason);else{var listener=function(){abort(request,signal.reason),signal.removeEventListener(\"abort\",listener)};signal.addEventListener(\"abort\",listener)}}return new ReadableStream({type:\"bytes\",start:function(){request.flushScheduled=null!==request.destination,supportsRequestStorage?scheduleMicrotask(function(){requestStorage.run(request,performWork,request)}):scheduleMicrotask(function(){return performWork(request)}),setTimeoutOrImmediate(function(){request.status===OPENING&&(request.status=11)},0)},pull:function(controller){if(request.status===CLOSING)request.status=CLOSED,closeWithError(controller,request.fatalError);else if(request.status!==CLOSED&&null===request.destination){request.destination=controller;try{flushCompletedChunks(request,controller)}catch(error){logRecoverableError(request,error,null),fatalError(request,error)}}},cancel:function(reason){request.destination=null,abort(request,reason)}},{highWaterMark:0})})","routeModule":{"userland":{"loaderTree":["","$Y","$Y"]},"definition":"$Y"},"serverHooks":"$Y","taintObjectReference":"$E(function notImplemented() {\n throw new Error('Taint can only be used with the taint flag.');\n})","tree":"$Y","workAsyncStorage":"$Y","workUnitAsyncStorage":"$Y"},"url":"$Y","renderOpts":"$Y","workStore":"$Y","parsedRequestHeaders":"$Y","getDynamicParamFromSegment":"$E(function(segment){let segmentParam=getSegmentParam(segment);if(!segmentParam)return null;let key=segmentParam.param,value1=params[key];if(fallbackRouteParams&&fallbackRouteParams.has(segmentParam.param)?value1=fallbackRouteParams.get(segmentParam.param):Array.isArray(value1)?value1=value1.map(i=>encodeURIComponent(i)):\"string\"==typeof value1&&(value1=encodeURIComponent(value1)),!value1){let isCatchall=\"catchall\"===segmentParam.type,isOptionalCatchall=\"optional-catchall\"===segmentParam.type;if(isCatchall||isOptionalCatchall){let dynamicParamType=dynamicParamTypes[segmentParam.type];return isOptionalCatchall?{param:key,value:null,type:dynamicParamType,treeSegment:[key,\"\",dynamicParamType]}:{param:key,value:value1=pagePath.split(\"/\").slice(1).flatMap(pathSegment=>{let param=function(param){let match=param.match(PARAMETER_PATTERN);return match?parseMatchedParameter(match[1]):parseMatchedParameter(param)}(pathSegment);return params[param.key]??param.key}),type:dynamicParamType,treeSegment:[key,value1.join(\"/\"),dynamicParamType]}}}let type=function(type){let short=dynamicParamTypes[type];if(!short)throw Error(\"Unknown dynamic param type\");return short}(segmentParam.type);return{param:key,value:value1,treeSegment:[key,Array.isArray(value1)?value1.join(\"/\"):value1,type],type:type}})","query":"$Y","isPrefetch":false,"isAction":false,"requestTimestamp":1736405859311,"appUsingSizeAdjustment":true,"flightRouterState":"$Y","requestId":"HofB0Vs1v9MC4GMWwYxeH","pagePath":"/pokemon/[name]","clientReferenceManifest":"$Y","assetPrefix":"","isNotFoundPath":false,"nonce":"$undefined","res":"$Y"}}}
a:D"$12"
a:null
14:{"name":"MetadataRoot","env":"Server","key":"HofB0Vs1v9MC4GMWwYxeH","owner":null,"props":{}}
13:D"$14"
16:{"name":"__next_metadata_boundary__","env":"Server","key":null,"owner":"$14","props":{}}
15:D"$16"
18:{"name":"__next_viewport_boundary__","env":"Server","key":null,"owner":"$14","props":{}}
17:D"$18"
13:["$","$1","HofB0Vs1v9MC4GMWwYxeH",{"children":[["$","$Lf",null,{"children":"$L15"},"$14"],["$","$L10",null,{"children":"$L17"},"$14"],["$","meta",null,{"name":"next-size-adjust","content":""},"$14"]]},null]
0:{"b":"development","f":[["children","pokemon",["pokemon",{"children":[["name","pikachu","d"],{"children":["__PAGE__",{}]}]}],["pokemon",["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","pokemon","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{},null],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"},null]]},null],{"children":[["name","pikachu","d"],["$","$1","c",{"children":[null,["$","$L2",null,{"parallelRouterKey":"children","segmentPath":["children","pokemon","children","$0:f:0:3:2:children:0","children"],"error":"$undefined","errorStyles":"$undefined","errorScripts":"$undefined","template":["$","$L3",null,{},null],"templateStyles":"$undefined","templateScripts":"$undefined","notFound":"$undefined","forbidden":"$undefined","unauthorized":"$undefined"},null]]},null],{"children":["__PAGE__",["$","$1","c",{"children":["$L4",[["$","script","script-0",{"src":"/_next/static/chunks/_a7c828._.js","async":true,"nonce":"$undefined"},null],["$","script","script-1",{"src":"/_next/static/chunks/src_app_pokemon_%5Bname%5D_page_tsx_36054f._.js","async":true,"nonce":"$undefined"},null]],["$","$L7",null,{"children":"$L8"},null]]},null],{},null,false]},null,false]},null,false],["$","$1","h",{"children":["$a","$13"]},null],false]],"S":false}
17:[["$","meta","0",{"name":"viewport","content":"width=device-width, initial-scale=1"},"$9"]]
15:[["$","meta","0",{"charSet":"utf-8"},"$16"],["$","title","1",{"children":"Create Next App"},"$16"],["$","meta","2",{"name":"description","content":"Generated by create next app"},"$16"],["$","link","3",{"rel":"icon","href":"/favicon.ico?favicon.45db1c09.ico","sizes":"256x256","type":"image/x-icon"},"$16"]]
8:null
19:I["[project]/src/components/Button.tsx [app-client] (ecmascript)",["static/chunks/src_app_layout_tsx_20a9fc._.js","static/chunks/src_app_layout_tsx_61af54._.js","static/chunks/_a7c828._.js","static/chunks/src_app_pokemon_[name]_page_tsx_36054f._.js"],"default"]
1a:I["[project]/src/components/HpAlerter.tsx [app-client] (ecmascript)",["static/chunks/src_app_layout_tsx_20a9fc._.js","static/chunks/src_app_layout_tsx_61af54._.js","static/chunks/_a7c828._.js","static/chunks/src_app_pokemon_[name]_page_tsx_36054f._.js"],"default"]
4:["$","ul",null,{"children":[["$","li",null,{"children":["Name: ","pikachu"]},"$5"],["$","li",null,{"children":["Base HP: ",35]},"$5"],["$","li",null,{"children":["$","$L19",null,{"children":"Click me"},"$5"]},"$5"],["$","li",null,{"children":["$","$L1a",null,{"hp":35},"$5"]},"$5"]]},"$5"]
The text was updated successfully, but these errors were encountered:
In one of my server components I was doing this:
This causes next.js to log this error to my server console, though it currently works anyway:
The error is also returned as part of the RSC payload if it happens during a client-side page transition. Presumably so that it can be emitted in the browser console as well (which it is). This error in the response payload causes the rsc-parser to fail with this error:
This is definitely not a correct failure, as I am running the next.js dev server on my local machine. I'm not mismatching dev and prod mode. I can see that the extension is checking
process.env.NODE_ENV === 'development'
and if this condition is not true then it throws the above error if there any87
/"W"
entries in the RSC payload. ThatNODE_ENV
check is failing in this case I guess.If I fix the error in my code (by doing
(await params).name
, then the error disappears from the RSC response payload, and the parser processes it successfully.I'm running next.js 15.1.0, and 6.0.1 (10/15/2024) of the RSC dev tools. Here is the full raw payload which is causing the parser to fail:
The text was updated successfully, but these errors were encountered: