HelloZeroNet/ZeroNet · error · Error

Style values must be strings

Error message

Style values must be strings

What it means

checkStyleValue in maquette throws this when a style object property value is not a string. Maquette writes style values directly to the DOM via element.style, which only accepts strings, so numeric or other types are rejected early with this clear error instead of failing silently in the DOM.

Source

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

    };
    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') {
            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) {

View on GitHub (pinned to 454c0b2e7e)

Solutions

1. Convert all style values to strings, including units: { height: '100px' }.
2. Skip or stringify null/undefined values before rendering.
3. Create a small helper that coerces numeric style values to strings with correct units.

Example fix

// before
h('div', { styles: { height: 100, opacity: 0.5 } })
// after
h('div', { styles: { height: '100px', opacity: '0.5' } })

function validateStyles(styles) {
  return Object.entries(styles || {}).every(function ([k, v]) { return typeof v === 'string'; });
}
// call before rendering: if (!validateStyles(props.styles)) { ... }

function isStringStyleObject(s) {
  return s != null && typeof s === 'object' && Object.values(s).every(function (v) { return typeof v === 'string'; });
}

try {
  projection.update(render());
} catch (e) {
  if (e.message === 'Style values must be strings') { coerceStylesToString(props.styles); }
  else { throw e; }
}

When it happens

Trigger: Passing a vnode properties object whose `styles` property contains a non-string value, e.g. h('div', { styles: { height: 100 } }), during setProperties or updateProperties.

Common situations: Setting numeric CSS values (height: 100 instead of '100px'), passing null/undefined style values, or porting React-style style objects (React accepts unitless numbers) into maquette.

Related errors

• Style values must be strings
• Provide a transitions object to the projectionOptions to do
• 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/9432d859f096fbfe. Report an issue: GitHub.