Middleware does not add nonce when deployed to AWS amplify, but works well on local development

[peterochieng]

Link to the code that reproduces this issue

https://github.com/peterochieng/csp-test

To Reproduce

1. Add middleware for Adding CSP directives.
   `import { NextRequest, NextResponse } from 'next/server'

export const nonce = Buffer.from(crypto.randomUUID()).toString('base64')

export function middleware(request: NextRequest) {

const cspHeader = default-src 'self'; script-src 'self' 'nonce-${nonce}' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' blob: data:; font-src 'self'; object-src 'none'; base-uri 'self'; form-action 'self'; frame-ancestors 'none'; upgrade-insecure-requests; connect-src 'self' https://example.com https://ipapi.co/json/;
// Replace newline characters and spaces
const contentSecurityPolicyHeaderValue = cspHeader
.replace(/\s{2,}/g, ' ')
.trim()

const requestHeaders = new Headers(request.headers)
requestHeaders.set('x-nonce', nonce)

requestHeaders.set(
'Content-Security-Policy',
contentSecurityPolicyHeaderValue
)

const response = NextResponse.next({
request: {
headers: requestHeaders,
},
})
response.headers.set(
'Content-Security-Policy',
contentSecurityPolicyHeaderValue
)

return response
}

export const config = {
matcher: [
'/(.*)',
'/', // explicit matcher for root route
],
}
`
2. Run the application on local dev using npm run dev. Test and you'll see it works fine. Open network tab in dev tools and check the response. All scripts, have the nonce added on local dev.

3. Deploy your sample application to AWS amplify. You will get a white screen or screen with no content with errors in console in devTools. I have attached screenshot of error.
   

Current vs. Expected behavior

I expect the web app to load well without issues since CSP addition is done by middleware. But, what I get is a blank screen with an error. This error.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Pro N
Binaries:
  Node: 20.9.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.4
  eslint-config-next: 14.0.4
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Middleware

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

No response