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 the `className` property name to avoid DOM property vs attribute confusion; classes must be set via the `class` attribute (for static) or the `classes` object (for conditional). Unlike React, `className` is not aliased, so using it throws immediately during property application.

Source

Thrown at plugins/UiConfig/media/js/all.js:298

    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 the property to `class` for a static class string: { class: 'foo' }.
2. Use the `classes` object for conditional classes: { classes: { active: isActive } }.
3. Update JSX typings/pragma so JSX uses `class` (maquette's JSX definitions expect class/classes).

Example fix

// before
h('div', { className: 'card active' })
// after
h('div', { class: 'card active' })

function assertNoClassName(properties) {
  if (properties && 'className' in properties) {
    throw new Error('Use "class" or "classes", not "className"');
  }
}

function hasClassNameProp(props) {
  return props != null && Object.prototype.hasOwnProperty.call(props, 'className');
}

try {
  projection = dom.append(container, vnode);
} catch (e) {
  if (e.message.indexOf('className') !== -1) { console.error('Rename className to class in vnode properties'); }
  throw e;
}

When it happens

Trigger: Rendering a vnode with properties { className: 'foo' } via h() and dom.append/merge/createDom; typically copied from React-style JSX conventions.

Common situations: React developers switching to maquette and writing JSX with className; codemods/porting older React components; TypeScript configs where JSX intrinsic elements were declared with className instead of class.

Related errors

• 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
• ${parentVNode.vnodeSelector} had a ${childNode.vnodeSelector

AI-assisted analysis of HelloZeroNet/ZeroNet@454c0b2e7e (2026-09-02). Data as JSON: /api/errors/343fee500352e73b. Report an issue: GitHub.