{"record":{"id":"a16be0e6fc98722b","repo":"hakimel/reveal.js","slug":"unable-to-find-presentation-root-div-class-reve","errorCode":null,"errorMessage":"Unable to find presentation root (<div class=\"reveal\">).","messagePattern":"Unable to find presentation root \\(<div class=\"reveal\">\\)\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"critical","filePath":"js/index.ts","lineNumber":44,"sourceCode":" * reveal.js API and ensures backwards compatibility.\n * This API only allows for one Reveal instance per\n * page, whereas the new API above lets you run many\n * presentations on the same page.\n *\n * Reveal.initialize( { controls: false } ).then(() => {\n *   // reveal.js is ready\n * });\n */\n\ntype RevealApiFunction = (deck: RevealApi) => any;\n\nconst enqueuedAPICalls: RevealApiFunction[] = [];\n\nReveal.initialize = (options?: RevealConfig) => {\n\tconst revealElement = document.querySelector('.reveal');\n\n\tif (!(revealElement instanceof HTMLElement)) {\n\t\tthrow new Error('Unable to find presentation root (<div class=\"reveal\">).');\n\t}\n\n\t// Create our singleton reveal.js instance\n\tObject.assign(Reveal, new Deck(revealElement, options));\n\n\t// Invoke any enqueued API calls\n\tenqueuedAPICalls.map((method) => method(Reveal as RevealApi));\n\n\treturn Reveal.initialize();\n};\n\n/**\n * The pre 4.0 API let you add event listener before\n * initializing. We maintain the same behavior by\n * queuing up premature API calls and invoking all\n * of them when Reveal.initialize is called.\n */\n(","sourceCodeStart":26,"sourceCodeEnd":62,"githubUrl":"https://github.com/hakimel/reveal.js/blob/a3b940695648aa1c5b0680bc9a5b905cf43020e5/js/index.ts#L26-L62","documentation":"Reveal.initialize (js/index.ts:30) bootstraps the singleton deck by querying document.querySelector('.reveal') and requires it to be an HTMLElement. If the selector returns null or a non-element node, initialize throws before constructing the Deck. This is the single hard precondition for bootstrapping reveal.js: the presentation root element must exist in the document at the moment initialize runs.","triggerScenarios":"Calling Reveal.initialize before the DOM is parsed (script in <head> without defer, or a module that runs during SSR where document has no .reveal); the root <div> missing the class attribute 'reveal'; the class mistyped (e.g. 'reveals', 'reveal.js'); a custom mount where the root was renamed; running initialize twice after the element was removed.","commonSituations":"Bundlers that execute the initialize call at import time instead of after DOMContentLoaded; embedding reveal.js into another framework's mount lifecycle that has not yet rendered the root; copy-paste setups that dropped the wrapper <div class=\"reveal\">; ES module import order placing initialize ahead of the HTML.","solutions":["Ensure the HTML contains <div class=\"reveal\"> ... </div> and that initialize runs after it is parsed — wrap the call in DOMContentLoaded or place the script with defer at the end of <body>.","Verify the element exists before initializing: const el = document.querySelector('.reveal'); if (el) Reveal.initialize(opts).","Double-check the class spelling and that no build step strips class attributes from the root.","If integrating under React/Vue/etc., defer Reveal.initialize to a post-mount effect where the root node is guaranteed present."],"exampleFix":"// before (runs during module eval, DOM not ready)\nimport Reveal from 'reveal.js';\nReveal.initialize({ controls: true });\n\n// after\nimport Reveal from 'reveal.js';\ndocument.addEventListener('DOMContentLoaded', () => {\n  Reveal.initialize({ controls: true });\n});","handlingStrategy":"validation","validationCode":"function initializeWhenReady(options) {\n  const start = () => {\n    const root = document.querySelector('.reveal');\n    if (!(root instanceof HTMLElement)) {\n      console.error('Reveal: no <div class=\"reveal\"> found in the document.');\n      return;\n    }\n    Reveal.initialize(options);\n  };\n  if (document.readyState === 'loading') {\n    document.addEventListener('DOMContentLoaded', start, { once: true });\n  } else {\n    start();\n  }\n}","typeGuard":"function hasRevealRoot(doc = document) {\n  return doc.querySelector('.reveal') instanceof HTMLElement;\n}","tryCatchPattern":"try {\n  Reveal.initialize(options);\n} catch (e) {\n  if (/presentation root/.test(e.message)) {\n    document.addEventListener('DOMContentLoaded', () => Reveal.initialize(options), { once: true });\n  } else {\n    throw e;\n  }\n}","preventionTips":["Always include <div class=\"reveal\"> in the host HTML before initialize runs.","Load your bootstrap script with defer or after DOMContentLoaded.","When embedding in another framework, call initialize from a post-mount effect, not at module top level.","Verify the class attribute is not stripped by SSR hydration or a CSS-in-JS transform."],"tags":["dom","initialization","bootstrap","reveal-root"],"backgroundTag":null,"analyzedSha":"a3b940695648aa1c5b0680bc9a5b905cf43020e5","analyzedAt":"2026-08-12T23:46:52.821Z","schemaVersion":2},"datasetVersion":"2026-08-13T04:17:16.726Z"}