{"record":{"id":"fd13fc0fd581a7b2","repo":"eythaann/Seelen-UI","slug":"root-element-not-found","errorCode":null,"errorMessage":"Root element not found","messagePattern":"Root element not found","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"libs/ui/react/utils/index.ts","lineNumber":6,"sourceCode":"import type { ResourceText } from \"@seelen-ui/lib/types\";\n\nexport function getRootContainer(): HTMLElement {\n const element = document.getElementById(\"root\");\n if (!element) {\n throw new Error(\"Root element not found\");\n }\n return element;\n}\n\nexport function toPhysicalPixels(size: number): number {\n return Math.round(size * globalThis.devicePixelRatio);\n}\n\nexport function getResourceText(text: ResourceText, locale: string): string {\n if (typeof text === \"string\") {\n return text;\n }\n return text[locale] || text[\"en\"] || \"Unknown\";\n}\n\n// Difference between Windows epoch (1601) and Unix epoch (1970) in milliseconds\nconst EPOCH_DIFF_MILLISECONDS = 11644473600000n;\n","sourceCodeStart":1,"sourceCodeEnd":24,"githubUrl":"https://github.com/eythaann/Seelen-UI/blob/dee4aaa94066c5d0888ab25554864862fc47be15/libs/ui/react/utils/index.ts#L1-L24","documentation":"getRootContainer() looks up the DOM element with id 'root' and returns it as the mount point for React apps in Seelen UI webviews. If no #root element exists at call time the app has no mount point, so it throws instead of returning null.","triggerScenarios":"Calling getRootContainer() before the DOM is parsed (script in without defer, or before DOMContentLoaded); the HTML entry missing

; the element having a different id; calling from a context without document (tests/workers).","commonSituations":"Renaming the mount div during an HTML refactor; copying a template whose script runs before body exists; scaffolding with no root div; jsdom tests rendering the app without fixture markup.","solutions":["Add

to the webview's index.html body.","Call getRootContainer() after DOM ready (script at end of body, defer, or DOMContentLoaded).","Match the id used by your entry point with the one in the HTML.","In tests, create a #root fixture or render into a container you create yourself."],"exampleFix":"// before: (no mount point)\n// after:

","handlingStrategy":"fallback","validationCode":"const el = document.getElementById('root'); if (!el) throw new Error('#root missing - check index.html and script load order');","typeGuard":"function hasRoot(): boolean { return typeof document !== 'undefined' && document.getElementById('root') !== null; }","tryCatchPattern":"let container: HTMLElement; try { container = getRootContainer(); } catch (e) { if (e instanceof Error && e.message === 'Root element not found') { container = document.createElement('div'); container.id = 'root'; document.body.appendChild(container); } else { throw e; } }","preventionTips":["Keep

in every widget index.html.","Load entry scripts with defer or at end of body so the DOM exists.","Call getRootContainer() inside DOMContentLoaded or after mount-ready signals.","In tests, create the #root fixture before importing app entry modules."],"tags":["dom","react","bootstrap"],"backgroundTag":"missing-dom-element","analyzedSha":"dee4aaa94066c5d0888ab25554864862fc47be15","analyzedAt":"2026-09-03T10:20:37.842Z","contentChangedAt":"2026-09-03T10:20:37.842Z","schemaVersion":2},"datasetVersion":"2026-09-10T17:17:09.494Z"}