fix: added support for edge rendering

packages/next/build/entries.ts

@@ -212,6 +212,7 @@ export function getEdgeServerEntry(opts: {
     stringifiedConfig: JSON.stringify(opts.config),
     pagesType: opts.pagesType,
     appDirLoader: Buffer.from(opts.appDirLoader || '').toString('base64'),
+    sriEnabled: !opts.isDev && !!opts.config.experimental.sri?.algorithm,
   }
 
   return {

packages/next/build/utils.ts

@@ -1082,13 +1082,13 @@ export async function isPageStatic({
           getStaticProps: mod.getStaticProps,
         }
       } else {
-        componentsResult = await loadComponents(
+        componentsResult = await loadComponents({
           distDir,
-          page,
+          pathname: page,
           serverless,
-          false,
-          false
-        )
+          hasServerComponents: false,
+          isAppPath: false,
+        })
       }
       const Comp = componentsResult.Component
 
@@ -1214,13 +1214,13 @@ export async function hasCustomGetInitialProps(
 ): Promise<boolean> {
   require('../shared/lib/runtime-config').setConfig(runtimeEnvConfig)
 
-  const components = await loadComponents(
+  const components = await loadComponents({
     distDir,
-    page,
-    isLikeServerless,
-    false,
-    false
-  )
+    pathname: page,
+    serverless: isLikeServerless,
+    hasServerComponents: false,
+    isAppPath: false,
+  })
   let mod = components.ComponentMod
 
   if (checkingApp) {
@@ -1239,13 +1239,13 @@ export async function getNamedExports(
   runtimeEnvConfig: any
 ): Promise<Array<string>> {
   require('../shared/lib/runtime-config').setConfig(runtimeEnvConfig)
-  const components = await loadComponents(
+  const components = await loadComponents({
     distDir,
-    page,
-    isLikeServerless,
-    false,
-    false
-  )
+    pathname: page,
+    serverless: isLikeServerless,
+    hasServerComponents: false,
+    isAppPath: false,
+  })
   let mod = components.ComponentMod
 
   return Object.keys(mod)

packages/next/build/webpack-config.ts

@@ -1751,7 +1751,11 @@ export default async function getBaseWebpackConfig(
         }),
       // MiddlewarePlugin should be after DefinePlugin so  NEXT_PUBLIC_*
       // replacement is done before its process.env.* handling
-      isEdgeServer && new MiddlewarePlugin({ dev }),
+      isEdgeServer &&
+        new MiddlewarePlugin({
+          dev,
+          sriEnabled: !dev && !!config.experimental.sri?.algorithm,
+        }),
       isClient &&
         new BuildManifestPlugin({
           buildId,
@@ -1803,7 +1807,7 @@ export default async function getBaseWebpackConfig(
             })),
       !dev &&
         isClient &&
-        config.experimental.sri?.algorithm &&
+        !!config.experimental.sri?.algorithm &&
         new SubresourceIntegrityPlugin(config.experimental.sri.algorithm),
       !dev &&
         isClient &&

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

@@ -14,6 +14,7 @@ export type EdgeSSRLoaderQuery = {
   stringifiedConfig: string
   appDirLoader?: string
   pagesType?: 'app' | 'pages' | 'root'
+  sriEnabled: boolean
 }
 
 export default async function edgeSSRLoader(this: any) {
@@ -30,6 +31,7 @@ export default async function edgeSSRLoader(this: any) {
     stringifiedConfig,
     appDirLoader: appDirLoaderBase64,
     pagesType,
+    sriEnabled,
   } = this.getOptions()
 
   const appDirLoader = Buffer.from(
@@ -94,6 +96,9 @@ export default async function edgeSSRLoader(this: any) {
     const reactLoadableManifest = self.__REACT_LOADABLE_MANIFEST
     const rscManifest = self.__RSC_MANIFEST
     const rscCssManifest = self.__RSC_CSS_MANIFEST
+    const subresourceIntegrityManifest = ${
+      sriEnabled ? 'self.__SUBRESOURCE_INTEGRITY_MANIFEST' : 'undefined'
+    }
 
     const render = getRender({
       dev: ${dev},
@@ -109,6 +114,7 @@ export default async function edgeSSRLoader(this: any) {
       reactLoadableManifest,
       serverComponentManifest: ${isServerComponent} ? rscManifest : null,
       serverCSSManifest: ${isServerComponent} ? rscCssManifest : null,
+      subresourceIntegrityManifest,
       config: ${stringifiedConfig},
       buildId: ${JSON.stringify(buildId)},
     })

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

@@ -23,6 +23,7 @@ export function getRender({
   appRenderToHTML,
   pagesRenderToHTML,
   serverComponentManifest,
+  subresourceIntegrityManifest,
   serverCSSManifest,
   config,
   buildId,
@@ -38,6 +39,7 @@ export function getRender({
   Document: DocumentType
   buildManifest: BuildManifest
   reactLoadableManifest: ReactLoadableManifest
+  subresourceIntegrityManifest?: Record<string, string>
   serverComponentManifest: any
   serverCSSManifest: any
   appServerMod: any
@@ -48,6 +50,7 @@ export function getRender({
     dev,
     buildManifest,
     reactLoadableManifest,
+    subresourceIntegrityManifest,
     Document,
     App: appMod.default as AppType,
   }

packages/next/build/webpack/plugins/middleware-plugin.ts

@@ -17,6 +17,7 @@ import {
   MIDDLEWARE_REACT_LOADABLE_MANIFEST,
   NEXT_CLIENT_SSR_ENTRY_SUFFIX,
   FLIGHT_SERVER_CSS_MANIFEST,
+  SUBRESOURCE_INTEGRITY_MANIFEST,
 } from '../../../shared/lib/constants'
 
 export interface EdgeFunctionDefinition {
@@ -80,12 +81,19 @@ function isUsingIndirectEvalAndUsedByExports(args: {
   return false
 }
 
-function getEntryFiles(entryFiles: string[], meta: EntryMetadata) {
+function getEntryFiles(
+  entryFiles: string[],
+  meta: EntryMetadata,
+  opts: { sriEnabled: boolean }
+) {
   const files: string[] = []
   if (meta.edgeSSR) {
     if (meta.edgeSSR.isServerComponent) {
       files.push(`server/${FLIGHT_MANIFEST}.js`)
       files.push(`server/${FLIGHT_SERVER_CSS_MANIFEST}.js`)
+      if (opts.sriEnabled) {
+        files.push(`server/${SUBRESOURCE_INTEGRITY_MANIFEST}.js`)
+      }
       files.push(
         ...entryFiles
           .filter(
@@ -118,8 +126,9 @@ function getEntryFiles(entryFiles: string[], meta: EntryMetadata) {
 function getCreateAssets(params: {
   compilation: webpack.Compilation
   metadataByEntry: Map<string, EntryMetadata>
+  opts: { sriEnabled: boolean }
 }) {
-  const { compilation, metadataByEntry } = params
+  const { compilation, metadataByEntry, opts } = params
   return (assets: any) => {
     for (const entrypoint of compilation.entrypoints.values()) {
       if (!entrypoint.name) {
@@ -145,7 +154,7 @@ function getCreateAssets(params: {
 
       const edgeFunctionDefinition: EdgeFunctionDefinition = {
         env: Array.from(metadata.env),
-        files: getEntryFiles(entrypoint.getFiles(), metadata),
+        files: getEntryFiles(entrypoint.getFiles(), metadata, opts),
         name: entrypoint.name,
         page: page,
         matchers,
@@ -708,13 +717,15 @@ function getExtractMetadata(params: {
 }
 
 export default class MiddlewarePlugin {
-  dev: boolean
+  private readonly dev: boolean
+  private readonly sriEnabled: boolean
 
-  constructor({ dev }: { dev: boolean }) {
+  constructor({ dev, sriEnabled }: { dev: boolean; sriEnabled: boolean }) {
     this.dev = dev
+    this.sriEnabled = sriEnabled
   }
 
-  apply(compiler: webpack.Compiler) {
+  public apply(compiler: webpack.Compiler) {
     compiler.hooks.compilation.tap(NAME, (compilation, params) => {
       const { hooks } = params.normalModuleFactory
       /**
@@ -751,7 +762,11 @@ export default class MiddlewarePlugin {
           name: 'NextJsMiddlewareManifest',
           stage: (webpack as any).Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
         },
-        getCreateAssets({ compilation, metadataByEntry })
+        getCreateAssets({
+          compilation,
+          metadataByEntry,
+          opts: { sriEnabled: this.sriEnabled },
+        })
       )
     })
   }

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

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

packages/next/export/worker.ts

@@ -290,13 +290,13 @@ export default async function exportPage({
           getServerSideProps,
           getStaticProps,
           pageConfig,
-        } = await loadComponents(
+        } = await loadComponents({
           distDir,
-          page,
+          pathname: page,
           serverless,
-          !!serverComponents,
-          isAppPath
-        )
+          hasServerComponents: !!serverComponents,
+          isAppPath,
+        })
         const ampState = {
           ampFirst: pageConfig?.amp === true,
           hasQuery: Boolean(query.amp),
@@ -357,13 +357,13 @@ export default async function exportPage({
           throw new Error(`Failed to render serverless page`)
         }
       } else {
-        const components = await loadComponents(
+        const components = await loadComponents({
           distDir,
-          page,
+          pathname: page,
           serverless,
-          !!serverComponents,
-          isAppPath
-        )
+          hasServerComponents: !!serverComponents,
+          isAppPath,
+        })
         const ampState = {
           ampFirst: components.pageConfig?.amp === true,
           hasQuery: Boolean(query.amp),

packages/next/server/app-render.tsx

@@ -421,18 +421,15 @@ function getScriptNonceFromHeader(cspHeaderValue: string): string | undefined {
 
   // First try to find the directive for the 'script-src', otherwise try to
   // fallback to the 'default-src'.
-  let directive = directives.find((dir) => dir.startsWith('script-src'))
-  if (!directive) {
-    directive = directives.find((dir) => dir.startsWith('default-src'))
-  }
+  const directive =
+    directives.find((dir) => dir.startsWith('script-src')) ||
+    directives.find((dir) => dir.startsWith('default-src'))
 
   // If no directive could be found, then we're done.
   if (!directive) {
     return
   }
 
-  debugger
-
   // Extract the nonce from the directive
   const nonce = directive
     .split(' ')

packages/next/server/dev/static-paths-worker.ts

@@ -38,13 +38,13 @@ export async function loadStaticPaths(
   require('../../shared/lib/runtime-config').setConfig(config)
   setHttpAgentOptions(httpAgentOptions)
 
-  const components = await loadComponents(
+  const components = await loadComponents({
     distDir,
     pathname,
     serverless,
-    false,
-    false
-  )
+    hasServerComponents: false,
+    isAppPath: false,
+  })
 
   if (!components.getStaticPaths) {
     // we shouldn't get to this point since the worker should

packages/next/server/load-components.ts

@@ -13,7 +13,6 @@ import {
   BUILD_MANIFEST,
   REACT_LOADABLE_MANIFEST,
   FLIGHT_MANIFEST,
-  SUBRESOURCE_INTEGRITY_MANIFEST,
 } from '../shared/lib/constants'
 import { join } from 'path'
 import { requirePage } from './require'
@@ -61,14 +60,19 @@ export async function loadDefaultErrorComponents(distDir: string) {
   }
 }
 
-export async function loadComponents(
-  distDir: string,
-  pathname: string,
-  serverless: boolean,
-  hasServerComponents: boolean,
-  isAppPath: boolean,
-  sriEnabled?: boolean
-): Promise<LoadComponentsReturnType> {
+export async function loadComponents({
+  distDir,
+  pathname,
+  serverless,
+  hasServerComponents,
+  isAppPath,
+}: {
+  distDir: string
+  pathname: string
+  serverless: boolean
+  hasServerComponents: boolean
+  isAppPath: boolean
+}): Promise<LoadComponentsReturnType> {
   if (serverless) {
     const ComponentMod = await requirePage(pathname, distDir, serverless)
     if (typeof ComponentMod === 'string') {
@@ -118,21 +122,14 @@ export async function loadComponents(
     requirePage(pathname, distDir, serverless, isAppPath)
   )
 
-  const [
-    buildManifest,
-    reactLoadableManifest,
-    serverComponentManifest,
-    subresourceIntegrityManifest,
-  ] = await Promise.all([
-    require(join(distDir, BUILD_MANIFEST)),
-    require(join(distDir, REACT_LOADABLE_MANIFEST)),
-    hasServerComponents
-      ? require(join(distDir, 'server', FLIGHT_MANIFEST + '.json'))
-      : null,
-    sriEnabled
-      ? require(join(distDir, SUBRESOURCE_INTEGRITY_MANIFEST))
-      : undefined,
-  ])
+  const [buildManifest, reactLoadableManifest, serverComponentManifest] =
+    await Promise.all([
+      require(join(distDir, BUILD_MANIFEST)),
+      require(join(distDir, REACT_LOADABLE_MANIFEST)),
+      hasServerComponents
+        ? require(join(distDir, 'server', FLIGHT_MANIFEST + '.json'))
+        : null,
+    ])
 
   const Component = interopDefault(ComponentMod)
   const Document = interopDefault(DocumentMod)
@@ -145,7 +142,6 @@ export async function loadComponents(
     Document,
     Component,
     buildManifest,
-    subresourceIntegrityManifest,
     reactLoadableManifest,
     pageConfig: ComponentMod.config || {},
     ComponentMod,