{"record":{"id":"5d82749f4b1284c4","repo":"thedotmack/claude-mem","slug":"root-element-not-found","errorCode":null,"errorMessage":"Root element not found","messagePattern":"Root element not found","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"src/ui/viewer/index.tsx","lineNumber":8,"sourceCode":"import React from 'react';\nimport { createRoot } from 'react-dom/client';\nimport { App } from './App';\nimport { ErrorBoundary } from './components/ErrorBoundary';\n\nconst container = document.getElementById('root');\nif (!container) {\n throw new Error('Root element not found');\n}\n\nconst root = createRoot(container);\nroot.render(\n \n \n \n);\n","sourceCodeStart":1,"sourceCodeEnd":17,"githubUrl":"https://github.com/thedotmack/claude-mem/blob/d8bc9755e74915e5c3b999181e10a67c889bce2a/src/ui/viewer/index.tsx#L1-L17","documentation":"The viewer entry point requires an HTML element with id=\"root\" to mount the React app. If document.getElementById('root') returns null, the bootstrap throws immediately before rendering. This is a bundle/host-page contract violation.","triggerScenarios":"Loading the viewer bundle from an HTML page lacking

, a typo'd or renamed mount node, or running the script before the DOM element exists (script in without defer/module placement issues handled by bundler but possible with manual injection).","commonSituations":"Custom index.html missing the root div; serving the bundle against the wrong template; renaming the container in a fork; server-side rendering setups that don't include the mount point.","solutions":["Add

to the HTML page that loads the viewer bundle","Ensure the script tag loads after the root div exists in the DOM","Check for typos in the element id (case-sensitive)","Verify you are serving the viewer's own index.html, not another page"],"exampleFix":"// before (index.html)\n\n \n\n// after (index.html)\n\n

\n \n","handlingStrategy":"validation","validationCode":"if (typeof document === 'undefined' || !document.getElementById('root')) {\n throw new Error('Root element #root missing from host page');\n}","typeGuard":"function hasRoot(): HTMLElement is HTMLElement {\n return document.getElementById('root') !== null;\n}","tryCatchPattern":"// bootstrap is a throw, not catchable in-page; validate instead\nconst container = document.getElementById('root');\nif (!container) {\n document.body.insertAdjacentHTML('beforeend', '

');\n}","preventionTips":["Keep the standard

in the viewer's index.html","Load the bundle after the mount node exists","Don't rename the root container id in forks","Test the viewer against its own index.html template"],"tags":["dom","react","bootstrap"],"backgroundTag":"resource-not-found","analyzedSha":"d8bc9755e74915e5c3b999181e10a67c889bce2a","analyzedAt":"2026-09-17T16:40:26.182Z","contentChangedAt":"2026-09-17T16:40:26.182Z","schemaVersion":2},"datasetVersion":"2026-09-23T08:17:48.524Z"}