MagicMirrorOrg/MagicMirror · warning

node not found for adding

Error message

node not found for adding

What it means

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).

Source

Thrown at js/animateCSS.js:136

	// Sliding exits
	"slideOutDown",
	"slideOutLeft",
	"slideOutRight",
	"slideOutUp"
];

/**
 * Create an animation with Animate CSS
 * @param {string} [element] div element to animate.
 * @param {string} [animation] animation name.
 * @param {number} [animationTime] animation duration.
 */
function addAnimateCSS (element, animation, animationTime) {
	const animationName = `animate__${animation}`;
	const node = document.getElementById(element);
	if (!node) {
		// don't execute animate: we don't find div
		Log.warn("node not found for adding", element);
		return;
	}
	node.style.setProperty("--animate-duration", `${animationTime}s`);
	node.classList.add("animate__animated", animationName);
}

/**
 * Remove an animation with Animate CSS
 * @param {string} [element] div element to animate.
 * @param {string} [animation] animation name.
 */
function removeAnimateCSS (element, animation) {
	const animationName = `animate__${animation}`;
	const node = document.getElementById(element);
	if (!node) {
		// don't execute animate: we don't find div
		Log.warn("node not found for removing", element);
		return;

View on GitHub (pinned to 4b4a59534f)

Solutions

1. Verify the module name/identifier in the AnimateCSSIn/Out config matches an actually rendered module.
2. Ensure the module produces DOM output (check for provider/data errors in the log that prevent rendering).
3. Check ordering: if triggering animations manually, run them after the module's DOM is inserted (e.g. after notification 'MODULE_DOM_CREATED').
4. Restart with a clean browser cache to rule out stale module lists.

Example fix

// before (manual trigger too early)
this.sendNotification("CHAIN", ...); // runs before DOM exists
// after
this.sendNotification("MODULE_DOM_CREATED"); // then trigger animation

function nodeExists(element) {
  return typeof document !== "undefined" && document.getElementById(element) !== null;
}
// gate animation: if (nodeExists(moduleId)) addAnimateCSS(moduleId, anim, time);

function isRenderedModule(moduleName) {
  return !!document.querySelector(`.module[data-name="${moduleName}"]`);
}

When it happens

Trigger: _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.

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

Related errors

• node not found for removing
• module tries to update the DOM without being displayed.

AI-assisted analysis of MagicMirrorOrg/MagicMirror@4b4a59534f (2026-08-31). Data as JSON: /api/errors/7a2d5c974e8ca40b. Report an issue: GitHub.