{"record":{"id":"d8f0b47c701da2b1","repo":"remix-run/react-router","slug":"react-router-vite-plugin-can-t-detect-preamble-so","errorCode":null,"errorMessage":"React Router Vite plugin can't detect preamble. Something is wrong.","messagePattern":"React Router Vite plugin can't detect preamble\\. Something is wrong\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/react-router-dev/vite/plugin.ts","lineNumber":2802,"sourceCode":" return (\n REACT_REFRESH_HEADER.replaceAll(\"__SOURCE__\", JSON.stringify(id)) +\n code +\n REACT_REFRESH_FOOTER.replaceAll(\"__SOURCE__\", JSON.stringify(id))\n .replaceAll(\"__ACCEPT_EXPORTS__\", JSON.stringify(acceptExports))\n .replaceAll(\"__ROUTE_ID__\", JSON.stringify(route?.id))\n );\n}\n\nconst REACT_REFRESH_HEADER = `\nimport RefreshRuntime from \"${virtualHmrRuntime.id}\";\n\nconst inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;\nlet prevRefreshReg;\nlet prevRefreshSig;\n\nif (import.meta.hot && !inWebWorker) {\n if (!window.__vite_plugin_react_preamble_installed__) {\n throw new Error(\n \"React Router Vite plugin can't detect preamble. Something is wrong.\"\n );\n }\n\n prevRefreshReg = window.$RefreshReg$;\n prevRefreshSig = window.$RefreshSig$;\n window.$RefreshReg$ = (type, id) => {\n RefreshRuntime.register(type, __SOURCE__ + \" \" + id)\n };\n window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;\n}`.replaceAll(\"\\n\", \"\"); // Header is all on one line so source maps aren't affected\n\nconst REACT_REFRESH_FOOTER = `\nif (import.meta.hot && !inWebWorker) {\n window.$RefreshReg$ = prevRefreshReg;\n window.$RefreshSig$ = prevRefreshSig;\n RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {\n RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);","sourceCodeStart":2784,"sourceCodeEnd":2820,"githubUrl":"https://github.com/remix-run/react-router/blob/1fd704a7dabcbe3ae09d7387b460e6acaba30ec1/packages/react-router-dev/vite/plugin.ts#L2784-L2820","documentation":"Thrown at runtime inside the React Refresh preamble injected by the plugin (`REACT_REFRESH_HEADER`). Each HMR-affected module is prefixed with this snippet so that, on hot update, components self-register with Vite's Refresh runtime. If `window.__vite_plugin_react_preamble_installed__` is not set, the preamble that bootstraps `$RefreshReg$`/`$RefreshSig$` was never executed for the page, and component registration would silently fail — so the plugin throws to surface the misconfiguration.","triggerScenarios":"The HTML shell does not include the React Refresh preamble script (normally injected by `@vitejs/plugin-react`/`@vitejs/plugin-react-refresh`); a custom `entry.server.tsx` or root route that omits `` in dev; the React Refresh preamble was stripped by an HTML minifier or CSP; multiple conflicting React plugins loaded.","commonSituations":"Removing `` in dev to \"clean up\" the document; adding a CSP that blocks the inline preamble; loading React Router's dev runtime in an iframe/WebView that lacks the preamble; conflict between `@vitejs/plugin-react` and a manual Refresh setup.","solutions":["Restore `` in your root route's ``.","Ensure `@vitejs/plugin-react` (or the Refresh plugin) is registered and ordered before `reactRouter()`.","Loosen CSP or nonces so the inline preamble can execute during dev.","Avoid double React plugin registration."],"exampleFix":"// before: root omits Scripts in dev\nexport default function Root() {\n return ();\n}\n// after\nimport { Scripts, Outlet } from \"react-router\";\nexport default function Root() {\n return (\n \n );\n}","handlingStrategy":"validation","validationCode":"import { readFileSync } from \"node:fs\";\nconst rootSrc = readFileSync(\"app/root.tsx\", \"utf8\");\nif (!//.test(rootSrc)) {\n throw new Error(\" missing — React Refresh preamble won't load\");\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always include `` in dev so the Refresh preamble executes.","Register `@vitejs/plugin-react` before `reactRouter()` in `plugins`.","Don't let CSP block the inline preamble during dev."],"tags":["hmr","react-refresh","dev","scripts","preamble"],"backgroundTag":null,"analyzedSha":"1fd704a7dabcbe3ae09d7387b460e6acaba30ec1","analyzedAt":"2026-08-12T13:54:57.804Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}