React18 Suspense violate CSP script-src

[charlieInCode]

I use React18 Suspense for my application. When I refreshed the whole page I got an error message below.

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'strict-dynamic' 'self' 'nonce-3d8ea51c7c94e7d047c71b5f52a6be5d'". Either the 'unsafe-inline' keyword, a hash ('sha256-t+32sreM3IZd/ngtsiPnbI+mF2Uv+Bcnx/8eVsE5w7s='), or a nonce ('nonce-...') is required to enable inline execution.

[kentcdodds]

This is the problem: remix-run/remix#5156

I'm going to see if I can help the Remix team get this prioritized.

[kentcdodds]

There's a PR open for fixing this (remix-run/remix#6389), until that's merged I'm adding a patch-package to the template so people can start doing this today.

[charlieInCode]

I have applied for the patch. But I got this error and the whole page cannot load normally.

Uncaught ReferenceError: nonce is not defined
at Scripts (components.js:702:9)
at renderWithHooks (react-dom.development.js:16305:18)
at mountIndeterminateComponent (react-dom.development.js:20074:13)
at beginWork (react-dom.development.js:21587:16)
at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
at invokeGuardedCallback (react-dom.development.js:4277:31)
at beginWork$1 (react-dom.development.js:27451:7)
at performUnitOfWork (react-dom.development.js:26557:12)
at workLoopConcurrent (react-dom.development.js:26543:5)

Where should I put the nonce in?