{"record":{"id":"08bc4ac880ce478d","repo":"remix-run/react-router","slug":"failed-to-load-css-for-dep-file","errorCode":null,"errorMessage":"Failed to load CSS for ${dep.file}","messagePattern":"Failed to load CSS for (.+?)","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"packages/react-router-dev/vite/styles.ts","lineNumber":105,"sourceCode":"        continue;\n      }\n\n      await findDeps(viteDevServer, node, deps);\n    }\n  } catch (err) {\n    console.error(err);\n  }\n\n  for (let dep of deps) {\n    if (\n      dep.file &&\n      isCssFile(dep.file) &&\n      !isCssUrlWithoutSideEffects(dep.url) // Ignore styles that resolved as URLs, inline or raw. These shouldn't get injected.\n    ) {\n      try {\n        styles[dep.url] = await loadCssContents(viteDevServer, dep);\n      } catch {\n        console.warn(`Failed to load CSS for ${dep.file}`);\n        // this can happen with dynamically imported modules, I think\n        // because the Vite module graph doesn't distinguish between\n        // static and dynamic imports? TODO investigate, submit fix\n      }\n    }\n  }\n\n  return (\n    Object.entries(styles)\n      .map(([fileName, css], i) => [\n        `\\n/* ${fileName\n          // Escape comment syntax in file paths\n          .replace(/\\/\\*/g, \"/\\\\*\")\n          .replace(/\\*\\//g, \"*\\\\/\")} */`,\n        css,\n      ])\n      .flat()\n      .join(\"\\n\") || undefined","sourceCodeStart":87,"sourceCodeEnd":123,"githubUrl":"https://github.com/remix-run/react-router/blob/6beaca39526d5716c3c112ebb0782765baa5a9ce/packages/react-router-dev/vite/styles.ts#L87-L123","documentation":"During dev, React Router walks the Vite module graph to collect CSS for a route and calls loadCssContents per CSS dependency. If loading one fails, it logs `Failed to load CSS for <file>` and skips that stylesheet — the in-code comment attributes this to dynamically imported modules where the Vite module graph doesn't cleanly distinguish static from dynamic imports. The dev server keeps running; the symptom is missing styles until reload.","triggerScenarios":"Dev server running, a route's CSS dependency fails to load through the module graph: CSS reachable only via a dynamic `import()`, a transform error in that CSS file, or a stale module graph after adding/removing files.","commonSituations":"CSS imported inside `await import(\"./lazy.module.css\")`; a PostCSS/Tailwind syntax error surfacing here first; HMR leaving the graph inconsistent; stale node_modules/.vite cache after dependency changes.","solutions":["Hard-refresh the page; if it persists, restart `react-router dev` to rebuild the Vite module graph","Open the exact file named in the warning and fix any CSS/PostCSS syntax error or bad @import/url() it contains","Clear the Vite cache: `rm -rf node_modules/.vite`, then restart dev","If the file is only reached through a dynamic import, import the CSS statically in the route module so the module graph tracks it reliably"],"exampleFix":"// before - app/routes/dashboard.tsx\nlet mod = await import(\"./dashboard.lazy\"); // dashboard.lazy imports its own CSS\n\n// after\nimport \"./dashboard.css\"; // static import tracked by the Vite module graph\nlet mod = await import(\"./dashboard.lazy\");","handlingStrategy":"retry","validationCode":"// cheap pre-check: every CSS file referenced by route modules exists and parses as non-empty\nimport fs from \"node:fs\";\nfor (let file of cssImportsFromRouteModules()) {\n  if (!fs.existsSync(file)) throw new Error(`Missing CSS file: ${file}`);\n  if (fs.statSync(file).size === 0) console.warn(`Empty CSS file: ${file}`);\n}","typeGuard":null,"tryCatchPattern":"// the framework already catches and warns per-dependency; mirror that in any\n// custom style pipeline:\ntry { styles[dep.url] = await loadCss(dep); } catch { console.warn(`Failed to load CSS for ${dep.file}`); }","preventionTips":["Import route CSS statically in route modules; keep dynamic imports for JS only","Keep PostCSS/Tailwind configs valid — CSS transform errors surface as this warning first","When styles go missing in dev, restart the dev server and clear node_modules/.vite before debugging app code"],"tags":["css","vite","dev-server","module-graph","dynamic-import"],"backgroundTag":"vite-css-load-failure","analyzedSha":"6beaca39526d5716c3c112ebb0782765baa5a9ce","analyzedAt":"2026-08-18T18:04:14.938Z","contentChangedAt":"2026-08-18T18:04:14.938Z","schemaVersion":2},"datasetVersion":"2026-09-14T00:17:10.932Z"}