HelloZeroNet/ZeroNet · error · Error
Provide a transitions object to the projectionOptions to do
Error message
Provide a transitions object to the projectionOptions to do animations
What it means
missingTransition is used as a placeholder for transition-related projectionOptions (transitions.enterAnimation, exitAnimation, etc.). When a render/update triggers an animation (entering or exiting DOM nodes) and no transitions object was supplied via projectionOptions, maquette calls this stub which throws. Animations in maquette are opt-in and require an explicit transitions strategy.
Source
Thrown at plugins/UiConfig/media/js/all.js:263
};
var appendChildren = function (parentSelector, insertions, main) {
for (var i = 0; i < insertions.length; i++) {
var item = insertions[i];
if (Array.isArray(item)) {
appendChildren(parentSelector, item, main);
} else {
if (item !== null && item !== undefined) {
if (!item.hasOwnProperty('vnodeSelector')) {
item = toTextVNode(item);
}
main.push(item);
}
}
}
};
// Render helper functions
var missingTransition = function () {
throw new Error('Provide a transitions object to the projectionOptions to do animations');
};
var DEFAULT_PROJECTION_OPTIONS = {
namespace: undefined,
eventHandlerInterceptor: undefined,
styleApplyer: function (domNode, styleName, value) {
// Provides a hook to add vendor prefixes for browsers that still need it.
domNode.style[styleName] = value;
},
transitions: {
enter: missingTransition,
exit: missingTransition
}
};
var applyDefaultProjectionOptions = function (projectorOptions) {
return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);
};
var checkStyleValue = function (styleValue) {
if (typeof styleValue !== 'string') {View on GitHub (pinned to 454c0b2e7e)
Solutions
- Pass a transitions object: projectionOptions = { transitions: maquette.createCSSTransitionsAnimationHelper() } when calling dom.append/merge/createDom or projector.append.
- If you don't need animations, remove the enterAnimation/exitAnimation properties from your vnodes so missingTransition is never invoked.
- Use the same projectionOptions object everywhere in a projector so the transitions object is consistently applied.
- If a projector was already created, you can modify DEFAULT_PROJECTION_OPTIONS.transions via maquette.setProjectionOptions (or extendProjectionOptions) before first render.
Example fix
// before
var projection = dom.append(container, h('div', { enterAnimation: 'fadeIn' }, ['hi']));
// after
var projectionOptions = { transitions: maquette.createCSSTransitionsAnimationHelper() };
var projection = dom.append(container, h('div', { enterAnimation: 'fadeIn' }, ['hi']), projectionOptions); Defensive patterns
Strategy: validation
Validate before calling
function assertTransitions(projectionOptions) {
if (projectionOptions && !projectionOptions.transitions) {
throw new Error('projectionOptions.transitions is required when using enter/exit animations');
}
}
// call before dom.append/merge/createDom Type guard
function hasTransitions(opts) {
return typeof opts === 'object' && opts !== null && typeof opts.transitions === 'object' && opts.transitions !== null;
} Try / catch
try {
projection = dom.append(container, vnode, projectionOptions);
} catch (e) {
if (e.message.indexOf('transitions object') !== -1) {
projection = dom.append(container, vnode, Object.assign({ transitions: createCSSTransitionsAnimationHelper() }, projectionOptions));
} else { throw e; }
} Prevention
- Define one shared projectionOptions object with a transitions object and reuse it for every append/merge/createDom call.
- Only add enterAnimation/exitAnimation properties to vnodes when transitions are configured.
- Set global defaults early with maquette.setProjectionOptions({ transitions: ... }) during app bootstrap.
- Lint or code-review any vnode containing animation properties to confirm the call site passes projectionOptions.
When it happens
Trigger: Calling dom.append/dom.merge/dom.createDom (or projector.append) with vnodes that have enterAnimation/exitAnimation properties set, while the projectionOptions object has no `transitions` key, so the default missingTransition stub is invoked during DOM creation or removal.
Common situations: Developers copy vnodes using CSS-transition helper properties (enterAnimation/exitAnimation) from examples but forget to pass `transitions: createCSSTransitionsAnimationHelper()` (or any object) into projectionOptions; also happens when bundling only part of maquette (e.g. the all.js bundle) where the transitions helper was tree-shaken or the projector was created without projection options.
Related errors
- Provide a transitions object to the projectionOptions to do
- Style values must be strings
- Property "className" is not supported, use "class".
- "class" property may not be updated. Use the "classes" prope
- Functions may not be updated on subsequent renders (property
AI-assisted analysis of HelloZeroNet/ZeroNet@454c0b2e7e (2026-09-02).
Data as JSON: /api/errors/9f154a05da8efa82.
Report an issue: GitHub.