{"record":{"id":"7a2d5c974e8ca40b","repo":"MagicMirrorOrg/MagicMirror","slug":"node-not-found-for-adding","errorCode":null,"errorMessage":"node not found for adding","messagePattern":"node not found for adding","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"js/animateCSS.js","lineNumber":136,"sourceCode":"\t// Sliding exits\n\t\"slideOutDown\",\n\t\"slideOutLeft\",\n\t\"slideOutRight\",\n\t\"slideOutUp\"\n];\n\n/**\n * Create an animation with Animate CSS\n * @param {string} [element] div element to animate.\n * @param {string} [animation] animation name.\n * @param {number} [animationTime] animation duration.\n */\nfunction addAnimateCSS (element, animation, animationTime) {\n\tconst animationName = `animate__${animation}`;\n\tconst node = document.getElementById(element);\n\tif (!node) {\n\t\t// don't execute animate: we don't find div\n\t\tLog.warn(\"node not found for adding\", element);\n\t\treturn;\n\t}\n\tnode.style.setProperty(\"--animate-duration\", `${animationTime}s`);\n\tnode.classList.add(\"animate__animated\", animationName);\n}\n\n/**\n * Remove an animation with Animate CSS\n * @param {string} [element] div element to animate.\n * @param {string} [animation] animation name.\n */\nfunction removeAnimateCSS (element, animation) {\n\tconst animationName = `animate__${animation}`;\n\tconst node = document.getElementById(element);\n\tif (!node) {\n\t\t// don't execute animate: we don't find div\n\t\tLog.warn(\"node not found for removing\", element);\n\t\treturn;","sourceCodeStart":118,"sourceCodeEnd":154,"githubUrl":"https://github.com/MagicMirrorOrg/MagicMirror/blob/4b4a59534f7da01e4030e46029fe9dd649a7675e/js/animateCSS.js#L118-L154","documentation":"addAnimateCSS looks up the target element by id before applying an animate.css class. If getElementById returns null (no such DOM node at that moment), it warns 'node not found for adding' and skips the animation instead of throwing. Called by the module hide/show machinery (AnimateCSSIn/Out).","triggerScenarios":"_hideModule/_showModule triggers an entrance/exit animation for a module whose DOM wrapper id does not exist — e.g. animation fired before the module rendered, module already fully hidden (display:none removes it from being findable is not the case, but removal is), or wrong module identifier.","commonSituations":"AnimateCSSIn configured on a module that fails to render (provider error, empty data); race at startup where the show animation runs before DOM insertion; referencing a module name/identifier that isn't in the DOM.","solutions":["Verify the module name/identifier in the AnimateCSSIn/Out config matches an actually rendered module.","Ensure the module produces DOM output (check for provider/data errors in the log that prevent rendering).","Check ordering: if triggering animations manually, run them after the module's DOM is inserted (e.g. after notification 'MODULE_DOM_CREATED').","Restart with a clean browser cache to rule out stale module lists."],"exampleFix":"// before (manual trigger too early)\nthis.sendNotification(\"CHAIN\", ...); // runs before DOM exists\n// after\nthis.sendNotification(\"MODULE_DOM_CREATED\"); // then trigger animation","handlingStrategy":"validation","validationCode":"function nodeExists(element) {\n  return typeof document !== \"undefined\" && document.getElementById(element) !== null;\n}\n// gate animation: if (nodeExists(moduleId)) addAnimateCSS(moduleId, anim, time);","typeGuard":"function isRenderedModule(moduleName) {\n  return !!document.querySelector(`.module[data-name=\"${moduleName}\"]`);\n}","tryCatchPattern":null,"preventionTips":["Trigger animations only after MODULE_DOM_CREATED.","Confirm modules configured with AnimateCSSIn actually render content.","Match config module names exactly to identifiers in the DOM."],"tags":["dom","animation","frontend"],"backgroundTag":"element-not-found","analyzedSha":"4b4a59534f7da01e4030e46029fe9dd649a7675e","analyzedAt":"2026-08-31T21:49:42.591Z","schemaVersion":2},"datasetVersion":"2026-08-31T22:30:34.772Z"}