edge: use JSON parse instead of inlining the manifests objects

packages/next/src/build/index.ts

@@ -2930,7 +2930,9 @@ export default async function build(
         )
         await promises.writeFile(
           path.join(distDir, PRERENDER_MANIFEST).replace(/\.json$/, '.js'),
-          `self.__PRERENDER_MANIFEST=${JSON.stringify(prerenderManifest)}`,
+          `self.__PRERENDER_MANIFEST=${JSON.stringify(
+            JSON.stringify(prerenderManifest)
+          )}`,
           'utf8'
         )
         await generateClientSsgManifest(prerenderManifest, {
@@ -2953,7 +2955,9 @@ export default async function build(
         )
         await promises.writeFile(
           path.join(distDir, PRERENDER_MANIFEST).replace(/\.json$/, '.js'),
-          `self.__PRERENDER_MANIFEST=${JSON.stringify(prerenderManifest)}`,
+          `self.__PRERENDER_MANIFEST=${JSON.stringify(
+            JSON.stringify(prerenderManifest)
+          )}`,
           'utf8'
         )
       }

packages/next/src/build/webpack/loaders/next-edge-ssr-loader/index.ts

@@ -138,16 +138,20 @@ const edgeSSRLoader: webpack.LoaderDefinitionFunction<EdgeSSRLoaderQuery> =
         : 'null'
     }
 
-    const buildManifest = self.__BUILD_MANIFEST
-    const prerenderManifest = self.__PRERENDER_MANIFEST
-    const reactLoadableManifest = self.__REACT_LOADABLE_MANIFEST
-    const rscManifest = self.__RSC_MANIFEST
-    const rscCssManifest = self.__RSC_CSS_MANIFEST
-    const rscServerManifest = self.__RSC_SERVER_MANIFEST
+    const maybeJSONParse = (str) => str ? JSON.parse(str) : undefined
+
+    const buildManifest = maybeJSONParse(self.__BUILD_MANIFEST)
+    const prerenderManifest = maybeJSONParse(self.__PRERENDER_MANIFEST)
+    const reactLoadableManifest = maybeJSONParse(self.__REACT_LOADABLE_MANIFEST)
+    const rscManifest = maybeJSONParse(self.__RSC_MANIFEST)
+    const rscCssManifest = maybeJSONParse(self.__RSC_CSS_MANIFEST)
+    const rscServerManifest = maybeJSONParse(self.__RSC_SERVER_MANIFEST)
     const subresourceIntegrityManifest = ${
-      sriEnabled ? 'self.__SUBRESOURCE_INTEGRITY_MANIFEST' : 'undefined'
+      sriEnabled
+        ? 'maybeJSONParse(self.__SUBRESOURCE_INTEGRITY_MANIFEST)'
+        : 'undefined'
     }
-    const nextFontManifest = self.__NEXT_FONT_MANIFEST
+    const nextFontManifest = maybeJSONParse(self.__NEXT_FONT_MANIFEST)
 
     const render = getRender({
       pagesType,

packages/next/src/build/webpack/plugins/build-manifest-plugin.ts

@@ -237,19 +237,23 @@ export default class BuildManifestPlugin {
       if (this.exportRuntime) {
         assets[`server/${MIDDLEWARE_BUILD_MANIFEST}.js`] =
           new sources.RawSource(
-            `self.__BUILD_MANIFEST=${JSON.stringify(assetMap)}`
+            `self.__BUILD_MANIFEST=${JSON.stringify(JSON.stringify(assetMap))}`
           )
       }
 
       if (!this.isDevFallback) {
         const clientManifestPath = `${CLIENT_STATIC_FILES_PATH}/${this.buildId}/_buildManifest.js`
 
         assets[clientManifestPath] = new sources.RawSource(
-          `self.__BUILD_MANIFEST = ${generateClientManifest(
-            compiler,
-            compilation,
-            assetMap,
-            this.rewrites
+          `self.__BUILD_MANIFEST = ${JSON.stringify(
+            JSON.stringify(
+              generateClientManifest(
+                compiler,
+                compilation,
+                assetMap,
+                this.rewrites
+              )
+            )
           )};self.__BUILD_MANIFEST_CB && self.__BUILD_MANIFEST_CB()`
         )
       }

packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

@@ -585,7 +585,7 @@ export class ClientReferenceEntryPlugin {
           ) as unknown as webpack.sources.RawSource
         assets[`${this.assetPrefix}${FLIGHT_SERVER_CSS_MANIFEST}.js`] =
           new sources.RawSource(
-            'self.__RSC_CSS_MANIFEST=' + manifest
+            `self.__RSC_CSS_MANIFEST=${JSON.stringify(manifest)}`
           ) as unknown as webpack.sources.RawSource
       }
     )
@@ -990,7 +990,7 @@ export class ClientReferenceEntryPlugin {
 
     assets[`${this.assetPrefix}${SERVER_REFERENCE_MANIFEST}.js`] =
       new sources.RawSource(
-        'self.__RSC_SERVER_MANIFEST=' + json
+        `self.__RSC_SERVER_MANIFEST=${JSON.stringify(json)}`
       ) as unknown as webpack.sources.RawSource
     assets[`${this.assetPrefix}${SERVER_REFERENCE_MANIFEST}.json`] =
       new sources.RawSource(json) as unknown as webpack.sources.RawSource

packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

@@ -396,7 +396,7 @@ export class ClientReferenceManifestPlugin {
     pluginState.ASYNC_CLIENT_MODULES = []
 
     assets[file + '.js'] = new sources.RawSource(
-      'self.__RSC_MANIFEST=' + json
+      `self.__RSC_MANIFEST=${JSON.stringify(json)}`
       // Work around webpack 4 type of RawSource being used
       // TODO: use webpack 5 type by default
     ) as unknown as webpack.sources.RawSource

packages/next/src/build/webpack/plugins/next-font-manifest-plugin.ts

@@ -144,10 +144,10 @@ export class NextFontManifestPlugin {
             }
           }
 
-          const manifest = JSON.stringify(nextFontManifest, null, 2)
+          const manifest = JSON.stringify(nextFontManifest, null)
           // Create manifest for edge
           assets[`server/${NEXT_FONT_MANIFEST}.js`] = new sources.RawSource(
-            `self.__NEXT_FONT_MANIFEST=${manifest}`
+            `self.__NEXT_FONT_MANIFEST=${JSON.stringify(manifest)}`
           )
           // Create manifest for server
           assets[`server/${NEXT_FONT_MANIFEST}.json`] = new sources.RawSource(

packages/next/src/build/webpack/plugins/react-loadable-plugin.ts

@@ -179,7 +179,9 @@ export class ReactLoadablePlugin {
     )
     if (this.runtimeAsset) {
       assets[this.runtimeAsset] = new sources.RawSource(
-        `self.__REACT_LOADABLE_MANIFEST=${JSON.stringify(manifest)}`
+        `self.__REACT_LOADABLE_MANIFEST=${JSON.stringify(
+          JSON.stringify(manifest)
+        )}`
       )
     }
     return assets

packages/next/src/build/webpack/plugins/subresource-integrity-plugin.ts

@@ -48,7 +48,7 @@ export class SubresourceIntegrityPlugin {
           const json = JSON.stringify(hashes, null, 2)
           const file = 'server/' + SUBRESOURCE_INTEGRITY_MANIFEST
           assets[file + '.js'] = new sources.RawSource(
-            'self.__SUBRESOURCE_INTEGRITY_MANIFEST=' + json
+            `self.__SUBRESOURCE_INTEGRITY_MANIFEST=${JSON.stringify(json)}`
             // Work around webpack 4 type of RawSource being used
             // TODO: use webpack 5 type by default
           ) as unknown as webpack.sources.RawSource

packages/next/src/client/route-loader.ts

@@ -12,7 +12,7 @@ const MS_MAX_IDLE_DELAY = 3800
 
 declare global {
   interface Window {
-    __BUILD_MANIFEST?: Record<string, string[]>
+    __BUILD_MANIFEST?: string
     __BUILD_MANIFEST_CB?: Function
     __MIDDLEWARE_MATCHERS?: MiddlewareMatcher[]
     __MIDDLEWARE_MANIFEST_CB?: Function
@@ -219,16 +219,16 @@ function resolvePromiseWithTimeout<T>(
 // Only cache this response as a last resort if we cannot eliminate all other
 // code branches that use the Build Manifest Callback and push them through
 // the Route Loader interface.
-export function getClientBuildManifest() {
+export function getClientBuildManifest(): Promise<Record<string, string[]>> {
   if (self.__BUILD_MANIFEST) {
-    return Promise.resolve(self.__BUILD_MANIFEST)
+    return Promise.resolve(JSON.parse(self.__BUILD_MANIFEST))
   }
 
   const onBuildManifest = new Promise<Record<string, string[]>>((resolve) => {
     // Mandatory because this is not concurrent safe:
     const cb = self.__BUILD_MANIFEST_CB
     self.__BUILD_MANIFEST_CB = () => {
-      resolve(self.__BUILD_MANIFEST!)
+      resolve(JSON.parse(self.__BUILD_MANIFEST!))
       cb && cb()
     }
   })