{"record":{"id":"11bc1f609d654a12","repo":"HelloZeroNet/ZeroNet","slug":"class-property-may-not-be-updated-use-the-clas-11bc1f","errorCode":null,"errorMessage":"\"class\" property may not be updated. Use the \"classes\" property for conditional css classes.","messagePattern":"\"class\" property may not be updated\\. Use the \"classes\" property for conditional css classes\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"plugins/UiConfig/media/js/lib/maquette.js","lineNumber":189,"sourceCode":"                }\n            }\n        }\n    };\n    var updateProperties = function (domNode, previousProperties, properties, projectionOptions) {\n        if (!properties) {\n            return;\n        }\n        var propertiesUpdated = false;\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            // assuming that properties will be nullified instead of missing is by design\n            var propValue = properties[propName];\n            var previousValue = previousProperties[propName];\n            if (propName === 'class') {\n                if (previousValue !== propValue) {\n                    throw new Error('\"class\" property may not be updated. Use the \"classes\" property for conditional css classes.');\n                }\n            } else if (propName === 'classes') {\n                var classList = domNode.classList;\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                    var on = !!propValue[className];\n                    var previousOn = !!previousValue[className];\n                    if (on === previousOn) {\n                        continue;\n                    }\n                    propertiesUpdated = true;\n                    if (on) {\n                        classList.add(className);\n                    } else {\n                        classList.remove(className);\n                    }","sourceCodeStart":171,"sourceCodeEnd":207,"githubUrl":"https://github.com/HelloZeroNet/ZeroNet/blob/454c0b2e7e000fda7000cba49027541fbf327b96/plugins/UiConfig/media/js/lib/maquette.js#L171-L207","documentation":"maquette does not support changing the `class` string property between renders of the same node; updateProperties throws if previousValue !== propValue. Developers must use the `classes` object property, whose boolean keys maquette diffs by toggling DOM classList entries.","triggerScenarios":"A vnode rendered with h('div', { class: 'a' }) is re-rendered as h('div', { class: 'a b' }) on the same DOM node during updateProperties.","commonSituations":"Conditionally changing styling on state change, appending modifier classes on toggle, or reusing JSX/other-VDOM code that treats class as freely mutable.","solutions":["Replace `class` with `classes: { 'a b': true }` style objects so maquette can diff them.","Keep the static class string constant and encode all conditional classes in `classes`.","If the class truly must change, give the node a different key so it is recreated instead of updated."],"exampleFix":"// before\nh('div', { class: isActive ? 'tab active' : 'tab' })\n// after\nh('div', { class: 'tab', classes: { active: isActive } })","handlingStrategy":"type-guard","validationCode":"function classIsStable(prevProps, nextProps) {\n  return prevProps == null || nextProps == null || prevProps.class === nextProps.class;\n}\n","typeGuard":"function usesConditionalClasses(props) {\n  return props == null || typeof props.class !== 'string' || props.classes === undefined || typeof props.classes === 'object';\n}","tryCatchPattern":"try {\n  projection.update(newVNode);\n} catch (e) {\n  if (/\"class\" property may not be updated/.test(e.message)) {\n    // re-create projection with the new root instead of updating\n    recreateProjection(newVNode);\n  } else { throw e; }\n}","preventionTips":["Treat `class` as immutable per node; put all toggles in `classes`.","Keep the static class string identical across renders of the same node.","Code review list/conditional rendering for class mutations."],"tags":["virtual-dom","css-classes","immutable-property"],"backgroundTag":"class-property-not-updatable","analyzedSha":"454c0b2e7e000fda7000cba49027541fbf327b96","analyzedAt":"2026-09-02T19:46:57.278Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}