{"record":{"id":"343fee500352e73b","repo":"HelloZeroNet/ZeroNet","slug":"property-classname-is-not-supported-use-class","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/all.js","lineNumber":298,"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":280,"sourceCodeEnd":316,"githubUrl":"https://github.com/HelloZeroNet/ZeroNet/blob/454c0b2e7e000fda7000cba49027541fbf327b96/plugins/UiConfig/media/js/all.js#L280-L316","documentation":"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.","triggerScenarios":"Rendering a vnode with properties { className: 'foo' } via h() and dom.append/merge/createDom; typically copied from React-style JSX conventions.","commonSituations":"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.","solutions":["Rename the property to `class` for a static class string: { class: 'foo' }.","Use the `classes` object for conditional classes: { classes: { active: isActive } }.","Update JSX typings/pragma so JSX uses `class` (maquette's JSX definitions expect class/classes)."],"exampleFix":"// before\nh('div', { className: 'card active' })\n// after\nh('div', { class: 'card active' })","handlingStrategy":"validation","validationCode":"function assertNoClassName(properties) {\n  if (properties && 'className' in properties) {\n    throw new Error('Use \"class\" or \"classes\", not \"className\"');\n  }\n}","typeGuard":"function hasClassNameProp(props) {\n  return props != null && Object.prototype.hasOwnProperty.call(props, 'className');\n}","tryCatchPattern":"try {\n  projection = dom.append(container, vnode);\n} catch (e) {\n  if (e.message.indexOf('className') !== -1) { console.error('Rename className to class in vnode properties'); }\n  throw e;\n}","preventionTips":["Use maquette's own JSX typings so JSX emits `class`, not `className`.","When porting React components, run a codemod replacing className with class.","Remember: static classes -> `class` string; conditional classes -> `classes` object.","Add a unit test that renders core components to catch className slips early."],"tags":["maquette","classname","virtual-dom","react-migration"],"backgroundTag":"unsupported-classname-property","analyzedSha":"454c0b2e7e000fda7000cba49027541fbf327b96","analyzedAt":"2026-09-02T19:46:57.278Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}