{"record":{"id":"9432d859f096fbfe","repo":"HelloZeroNet/ZeroNet","slug":"style-values-must-be-strings-9432d8","errorCode":null,"errorMessage":"Style values must be strings","messagePattern":"Style values must be strings","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"plugins/UiConfig/media/js/lib/maquette.js","lineNumber":93,"sourceCode":"    };\n    var DEFAULT_PROJECTION_OPTIONS = {\n        namespace: undefined,\n        eventHandlerInterceptor: undefined,\n        styleApplyer: function (domNode, styleName, value) {\n            // Provides a hook to add vendor prefixes for browsers that still need it.\n            domNode.style[styleName] = value;\n        },\n        transitions: {\n            enter: missingTransition,\n            exit: missingTransition\n        }\n    };\n    var applyDefaultProjectionOptions = function (projectorOptions) {\n        return extend(DEFAULT_PROJECTION_OPTIONS, projectorOptions);\n    };\n    var checkStyleValue = function (styleValue) {\n        if (typeof styleValue !== 'string') {\n            throw new Error('Style values must be strings');\n        }\n    };\n    var setProperties = function (domNode, properties, projectionOptions) {\n        if (!properties) {\n            return;\n        }\n        var eventHandlerInterceptor = projectionOptions.eventHandlerInterceptor;\n        var propNames = Object.keys(properties);\n        var propCount = propNames.length;\n        for (var i = 0; i < propCount; i++) {\n            var propName = propNames[i];\n            /* tslint:disable:no-var-keyword: edge case */\n            var propValue = properties[propName];\n            /* tslint:enable:no-var-keyword */\n            if (propName === 'className') {\n                throw new Error('Property \"className\" is not supported, use \"class\".');\n            } else if (propName === 'class') {\n                if (domNode.className) {","sourceCodeStart":75,"sourceCodeEnd":111,"githubUrl":"https://github.com/HelloZeroNet/ZeroNet/blob/454c0b2e7e000fda7000cba49027541fbf327b96/plugins/UiConfig/media/js/lib/maquette.js#L75-L111","documentation":"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.","triggerScenarios":"Passing a vnode properties object whose `styles` property contains a non-string value, e.g. h('div', { styles: { height: 100 } }), during setProperties or updateProperties.","commonSituations":"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.","solutions":["Convert all style values to strings, including units: { height: '100px' }.","Skip or stringify null/undefined values before rendering.","Create a small helper that coerces numeric style values to strings with correct units."],"exampleFix":"// before\nh('div', { styles: { height: 100, opacity: 0.5 } })\n// after\nh('div', { styles: { height: '100px', opacity: '0.5' } })","handlingStrategy":"validation","validationCode":"function validateStyles(styles) {\n  return Object.entries(styles || {}).every(function ([k, v]) { return typeof v === 'string'; });\n}\n// call before rendering: if (!validateStyles(props.styles)) { ... }\n","typeGuard":"function isStringStyleObject(s) {\n  return s != null && typeof s === 'object' && Object.values(s).every(function (v) { return typeof v === 'string'; });\n}","tryCatchPattern":"try {\n  projection.update(render());\n} catch (e) {\n  if (e.message === 'Style values must be strings') { coerceStylesToString(props.styles); }\n  else { throw e; }\n}","preventionTips":["Always include units in style strings ('100px', not 100).","Never pass null/undefined as a style value; omit the key instead.","Do not reuse React style objects (unitless numbers) directly in maquette."],"tags":["virtual-dom","styles","type-error"],"backgroundTag":"invalid-style-value","analyzedSha":"454c0b2e7e000fda7000cba49027541fbf327b96","analyzedAt":"2026-09-02T19:46:57.278Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}