{"record":{"id":"e0793582fc3df698","repo":"HelloZeroNet/ZeroNet","slug":"style-values-must-be-strings","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/all.js","lineNumber":282,"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":264,"sourceCodeEnd":300,"githubUrl":"https://github.com/HelloZeroNet/ZeroNet/blob/454c0b2e7e000fda7000cba49027541fbf327b96/plugins/UiConfig/media/js/all.js#L264-L300","documentation":"checkStyleValue enforces that every value in a vnode's `styles` object is a string. maquette deliberately does not coerce numbers (unlike React); unitless numeric values would be ambiguous (px vs raw), so non-string style values throw immediately during setProperties or updateProperties.","triggerScenarios":"Passing a `styles` object with a numeric value, e.g. h('div', { styles: { height: 100 } }) or { opacity: 0.5 }, during initial render (setProperties) or a re-render (updateProperties).","commonSituations":"Coming from React where numeric style values are auto-suffixed with 'px'; generating styles programmatically where numbers slip in (JSON data, CSS calculations); TypeScript not enabled so the Styles type isn't checked.","solutions":["Convert numeric values to strings with units: { height: '100px' } instead of { height: 100 }.","Use String(value) or template literals when building styles dynamically.","Add a runtime guard or TypeScript `Styles` typing to catch non-string values at authoring time.","For truly unitless properties (opacity, zIndex) still pass strings: { opacity: '0.5' }."],"exampleFix":"// before\nh('div', { styles: { height: 100, opacity: 0.5 } })\n// after\nh('div', { styles: { height: '100px', opacity: '0.5' } })","handlingStrategy":"type-guard","validationCode":"function assertStyles(styles) {\n  if (!styles) return;\n  Object.keys(styles).forEach(function (k) {\n    if (typeof styles[k] !== 'string') throw new TypeError('style ' + k + ' must be a string, got ' + typeof styles[k]);\n  });\n}\n// run before passing vnode to dom.append/projector","typeGuard":"function isStringStyles(styles) {\n  return styles == null || Object.values(styles).every(function (v) { return typeof v === 'string'; });\n}","tryCatchPattern":"try {\n  projection.update(updatedVnode);\n} catch (e) {\n  if (e.message === 'Style values must be strings') {\n    console.error('Non-string style value in vnode; coerce numbers to strings with units');\n  }\n  throw e;\n}","preventionTips":["Always write style values as strings with explicit units ('12px', '0.5').","If migrating from React, audit numeric style values during port.","Use the Styles TypeScript type from maquette so the compiler flags non-string values.","Centralize style construction in helpers that stringify values."],"tags":["maquette","styles","type-error","virtual-dom"],"backgroundTag":"invalid-style-value-type","analyzedSha":"454c0b2e7e000fda7000cba49027541fbf327b96","analyzedAt":"2026-09-02T19:46:57.278Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}