{"record":{"id":"62e7e3382d2bcf89","repo":"HelloZeroNet/ZeroNet","slug":"property-classname-is-not-supported-use-class-62e7e3","errorCode":null,"errorMessage":"Property \"className\" is not supported, use \"class\".","messagePattern":"Property \"className\" is not supported, use \"class\"\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"plugins/UiConfig/media/js/lib/maquette.js","lineNumber":109,"sourceCode":"    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) {\n                    // May happen if classes is specified before class\n                    domNode.className += ' ' + propValue;\n                } else {\n                    domNode.className = propValue;\n                }\n            } else if (propName === 'classes') {\n                // object with string keys and boolean values\n                var classNames = Object.keys(propValue);\n                var classNameCount = classNames.length;\n                for (var j = 0; j < classNameCount; j++) {\n                    var className = classNames[j];\n                    if (propValue[className]) {\n                        domNode.classList.add(className);\n                    }\n                }\n            } else if (propName === 'styles') {","sourceCodeStart":91,"sourceCodeEnd":127,"githubUrl":"https://github.com/HelloZeroNet/ZeroNet/blob/454c0b2e7e000fda7000cba49027541fbf327b96/plugins/UiConfig/media/js/lib/maquette.js#L91-L127","documentation":"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.","triggerScenarios":"Calling h('div', { className: 'foo' }) or passing an object with a className key to any vnode properties during projection (setProperties via initPropertiesAndChildren).","commonSituations":"Developers coming from React/JSX who habitually use className; copy-pasted React component code ported to maquette.","solutions":["Rename `className` to `class` in vnode properties.","Use the `classes` object property for conditional classes: { classes: { active: true } }."],"exampleFix":"// before\nh('div', { className: 'btn btn-primary' })\n// after\nh('div', { class: 'btn btn-primary' })","handlingStrategy":"validation","validationCode":"function hasClassNameProp(props) {\n  return props != null && Object.prototype.hasOwnProperty.call(props, 'className');\n}\n// before rendering: if (hasClassNameProp(props)) props = renameToClass(props);\n","typeGuard":"function usesValidClassProps(props) {\n  return props == null || !('className' in props);\n}","tryCatchPattern":"try {\n  projection.update(vnode);\n} catch (e) {\n  if (/Property \"className\" is not supported/.test(e.message)) { throw new Error('Replace className with class in vnode properties'); }\n  throw e;\n}","preventionTips":["Always use `class` (or the `classes` object) in maquette properties.","Add a lint rule flagging className in vnode property objects.","When porting React code, audit property names for className/style mappings."],"tags":["virtual-dom","properties","react-migration"],"backgroundTag":"unsupported-property-name","analyzedSha":"454c0b2e7e000fda7000cba49027541fbf327b96","analyzedAt":"2026-09-02T19:46:57.278Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}