{"record":{"id":"b9b23f56a195188b","repo":"vercel/next.js","slug":"failed-to-load-stylesheet-href","errorCode":null,"errorMessage":"Failed to load stylesheet: ${href}","messagePattern":"Failed to load stylesheet: (.+?)","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/next/src/client/route-loader.ts","lineNumber":303,"sourceCode":"      loadedScripts.set(src.toString(), (prom = appendScript(src)))\n      return prom\n    } else {\n      return appendScript(src)\n    }\n  }\n\n  function fetchStyleSheet(href: string): Promise<RouteStyleSheet> {\n    let prom: Promise<RouteStyleSheet> | undefined = styleSheets.get(href)\n    if (prom) {\n      return prom\n    }\n\n    styleSheets.set(\n      href,\n      (prom = fetch(href, { credentials: 'same-origin' })\n        .then((res) => {\n          if (!res.ok) {\n            throw new Error(`Failed to load stylesheet: ${href}`)\n          }\n          return res.text().then((text) => ({ href: href, content: text }))\n        })\n        .catch((err) => {\n          throw markAssetError(err)\n        }))\n    )\n    return prom\n  }\n\n  return {\n    whenEntrypoint(route: string) {\n      return withFuture(route, entrypoints)\n    },\n    onEntrypoint(route: string, execute: undefined | (() => unknown)) {\n      ;(execute\n        ? Promise.resolve()\n            .then(() => execute())","sourceCodeStart":285,"sourceCodeEnd":321,"githubUrl":"https://github.com/vercel/next.js/blob/0ae8c72462952df163f1b1e0726641bc5b40dc93/packages/next/src/client/route-loader.ts#L285-L321","documentation":"`fetchStyleSheet` in route-loader.ts:292-311 fetches a route's CSS file and throws `Failed to load stylesheet: ${href}` when `res.ok` is false (non-2xx status). The error is then wrapped by `markAssetError`. This runs in the client during route transitions to inline CSS for the next page.","triggerScenarios":"The browser fetches a stylesheet URL (e.g. `/_next/static/css/abc.css`) and the server returns a 404, 403, 500, or any non-2xx. Common when the build artifacts referenced by the current bundle do not exist on the serving host.","commonSituations":"Deploying only part of `.next/static`; a stale CDN cache pointing to deleted CSS chunks after a redeploy; `assetPrefix` pointing at a host missing the files; running `next start` against a different build than the one that generated the client bundle.","solutions":["Verify the CSS file in the error exists on the server/CDN under `/_next/static/css/`.","Redeploy the full `.next/static` directory so chunk hashes match the client bundle.","Purge the CDN cache for `_next/static/*` after a deploy.","Ensure `assetPrefix` points to a host that serves the same build's static assets."],"exampleFix":"// Not a code fix — deploy/CDN issue.\n// Ensure the full build output is deployed:\n//   .next/static/** must match the client bundle's chunk references.\n// next.config.js — check assetPrefix:\nmodule.exports = { assetPrefix: process.env.CDN_URL /* must serve same build */ }","handlingStrategy":"validation","validationCode":"// Deploy-time: assert all referenced CSS chunks exist in .next/static/css.\n// Build script example:\n// After `next build`, verify hashes referenced in the build manifest\n// are present on disk before shipping.","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Deploy the entire .next/static directory atomically with the client bundle.","Purge CDN caches for _next/static/* after each deploy.","Ensure assetPrefix points to a host serving the exact same build's assets.","Run next start against the same build that generated the client chunks."],"tags":["css","assets","deployment","cdn"],"analyzedSha":"0ae8c72462952df163f1b1e0726641bc5b40dc93","analyzedAt":"2026-08-06T19:44:29.143Z","schemaVersion":2},"datasetVersion":"2026-08-07T02:17:10.218Z"}