thedotmack/claude-mem · critical · Error

Root element not found

Error message

Root element not found

What it means

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.

Solutions

  1. Add <div id="root"></div> to the HTML page that loads the viewer bundle
  2. Ensure the script tag loads after the root div exists in the DOM
  3. Check for typos in the element id (case-sensitive)
  4. Verify you are serving the viewer's own index.html, not another page

Example fix

// before (index.html)
<body>
  <script src="/viewer.js"></script>
</body>
// after (index.html)
<body>
  <div id="root"></div>
  <script src="/viewer.js"></script>
</body>
Defensive patterns

Strategy: validation

Validate before calling

if (typeof document === 'undefined' || !document.getElementById('root')) {
  throw new Error('Root element #root missing from host page');
}

Type guard

function hasRoot(): HTMLElement is HTMLElement {
  return document.getElementById('root') !== null;
}

Try / catch

// bootstrap is a throw, not catchable in-page; validate instead
const container = document.getElementById('root');
if (!container) {
  document.body.insertAdjacentHTML('beforeend', '<div id="root"></div>');
}

Prevention

When it happens

Trigger: Loading the viewer bundle from an HTML page lacking <div id="root"></div>, a typo'd or renamed mount node, or running the script before the DOM element exists (script in <head> without defer/module placement issues handled by bundler but possible with manual injection).

Common situations: 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.

Understand the failure class

Background: 'Could not be found', 'does not exist', 'not found in database': the resource-not-found family when an ID, slug, key, or URI lookup comes back empty — this error's family across 20 libraries.

Related errors

AI-assisted analysis of thedotmack/claude-mem@d8bc9755e7 (2026-09-17). Data as JSON: /api/errors/5d82749f4b1284c4. Report an issue: GitHub.

Appendix: source

Thrown at src/ui/viewer/index.tsx:8

import React from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';
import { ErrorBoundary } from './components/ErrorBoundary';

const container = document.getElementById('root');
if (!container) {
  throw new Error('Root element not found');
}

const root = createRoot(container);
root.render(
  <ErrorBoundary>
    <App />
  </ErrorBoundary>
);

View on GitHub (pinned to d8bc9755e7)