Unexpected token < in JSON when using `strictDynamic` or `strictInlineStyles` in production build

[hongkiulam]

When I run npm run build with standalone mode, followed by node server.js to run the application, I get 500 when trying to load any page. I've narrowed it down to strictDynamic and strictInlineStyles because including either of these causes the same issue.

Running the e2e in this repo doesn't seem to have the same issue so something in my setup in combination with the package causes the issue? Just not sure where 😓

Error [SyntaxError]: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Response3.json (evalmachine.<anonymous>:1912:21)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async pRetry.retries.retries (evalmachine.<anonymous>:50:41499)
    at async RetryOperation._fn (evalmachine.<anonymous>:50:39483)

Package Versions

    "@next-safe/middleware": "0.10.0",
    "next": "^12.3.4",
    "next-safe": "^3.3.0",

Middleware file

import {
  chainMatch,
  isPageRequest,
  csp,
  strictDynamic,
  nextSafe,
  strictInlineStyles,
  CspSources,
} from "@next-safe/middleware";

const imgixDomains = ["*.imgix.net", "*.amazonaws.com"] as CspSources;
const devDomains =
  process.env.NODE_ENV === "development"
    ? (["http://localhost:*"] as CspSources)
    : [];

const securityMiddleware = [
  nextSafe({ disableCsp: true }),
  csp({
    directives: {
      "img-src": [...devDomains, ...imgixDomains, "data:"],
      "font-src": ["https://storage.googleapis.com", "data:"],
      "script-src": [
        ...devDomains,
        "https://widget.trustpilot.com",
      ],
      "frame-src": ["https://widget.trustpilot.com"],
    },
  }),
  strictDynamic(),
  strictInlineStyles(),
];

export default chainMatch(isPageRequest)(...securityMiddleware);

[riordanpawley]

I had this issue in preview environment on vercel. I was using the vercel preview deployment protection which threw itself in between the middleware call to https://[vercel-preview-domain].vercel.app/_next/static/~csp/csp-manifest.json strictDynamic fetch requests the cspmanifest.json and has no catch for if the response isnt json.

[sebkasanzew]

I've reproduced the issue here: https://codesandbox.io/p/sandbox/next-safe-middleware-issue-84-6ywgjy

Still trying to figure out, why the csp-manifest.json cannot be fetched. It uses the correct URL, I get a JSON back if I paste the URL in the browser.

[ramiant]

Did anybody figure out why strictDynamic or strictInlineStyles break the middlewares in production mode?