HelloZeroNet/ZeroNet · error · Error

Property "className" is not supported, use "class".

Error message

Property "className" is not supported, use "class".

What it means

maquette deliberately rejects a property named `className` and requires the standard HTML attribute name `class` instead. This catches React-idiom code where className is used; maquette maps properties directly to DOM attributes and class is the real attribute name.

Source

Thrown at plugins/UiConfig/media/js/lib/maquette.js:109

    var checkStyleValue = function (styleValue) {
        if (typeof styleValue !== 'string') {
            throw new Error('Style values must be strings');
        }
    };
    var setProperties = function (domNode, properties, projectionOptions) {
        if (!properties) {
            return;
        }
        var eventHandlerInterceptor = projectionOptions.eventHandlerInterceptor;
        var propNames = Object.keys(properties);
        var propCount = propNames.length;
        for (var i = 0; i < propCount; i++) {
            var propName = propNames[i];
            /* tslint:disable:no-var-keyword: edge case */
            var propValue = properties[propName];
            /* tslint:enable:no-var-keyword */
            if (propName === 'className') {
                throw new Error('Property "className" is not supported, use "class".');
            } else if (propName === 'class') {
                if (domNode.className) {
                    // May happen if classes is specified before class
                    domNode.className += ' ' + propValue;
                } else {
                    domNode.className = propValue;
                }
            } else if (propName === 'classes') {
                // object with string keys and boolean values
                var classNames = Object.keys(propValue);
                var classNameCount = classNames.length;
                for (var j = 0; j < classNameCount; j++) {
                    var className = classNames[j];
                    if (propValue[className]) {
                        domNode.classList.add(className);
                    }
                }
            } else if (propName === 'styles') {

View on GitHub (pinned to 454c0b2e7e)

Solutions

1. Rename `className` to `class` in vnode properties.
2. Use the `classes` object property for conditional classes: { classes: { active: true } }.

Example fix

// before
h('div', { className: 'btn btn-primary' })
// after
h('div', { class: 'btn btn-primary' })

function hasClassNameProp(props) {
  return props != null && Object.prototype.hasOwnProperty.call(props, 'className');
}
// before rendering: if (hasClassNameProp(props)) props = renameToClass(props);

function usesValidClassProps(props) {
  return props == null || !('className' in props);
}

try {
  projection.update(vnode);
} catch (e) {
  if (/Property "className" is not supported/.test(e.message)) { throw new Error('Replace className with class in vnode properties'); }
  throw e;
}

When it happens

Trigger: Calling h('div', { className: 'foo' }) or passing an object with a className key to any vnode properties during projection (setProperties via initPropertiesAndChildren).

Common situations: Developers coming from React/JSX who habitually use className; copy-pasted React component code ported to maquette.

Related errors

• Property "className" is not supported, use "class".
• Provide a transitions object to the projectionOptions to do
• Style values must be strings
• "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/62e7e3382d2bcf89. Report an issue: GitHub.