{"record":{"id":"919edbc784ac3c39","repo":"quasarframework/quasar","slug":"expected-a-string-as-propname-919edb","errorCode":null,"errorMessage":"Expected a string as propName","messagePattern":"Expected a string as propName","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"ui/src/utils/css-var/set-css-var.js","lineNumber":3,"sourceCode":"export default function setCssVar(propName, value, element = document.body) {\n  if (typeof propName !== 'string') {\n    throw new TypeError('Expected a string as propName')\n  }\n  if (typeof value !== 'string') {\n    throw new TypeError('Expected a string as value')\n  }\n  if (!(element instanceof Element)) {\n    throw new TypeError('Expected a DOM element')\n  }\n\n  element.style.setProperty(`--q-${propName}`, value)\n}\n","sourceCodeStart":1,"sourceCodeEnd":14,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/utils/css-var/set-css-var.js#L1-L14","documentation":"setCssVar(propName, value, element) writes a Quasar CSS custom property (--q-<propName>) onto an element's inline style. It throws this TypeError when propName is not a string, since it is concatenated into the CSS property name.","triggerScenarios":"setCssVar(123, '#f00'), setCssVar(), setCssVar(nonStringValue), or passing an enum/number as propName. Also thrown on SSR because the default document.body cannot be evaluated.","commonSituations":"Dynamically theming an app from a config object where the key was stored as a number; typos in variable definitions; calling in SSR server bundle before client hydration.","solutions":["Pass the brand/variable name as a string: setCssVar('primary', '#f37b26').","Coerce: setCssVar(String(propName), value).","Run only in browser context (onMounted / client-only code).","Validate config-driven names before calling (typeof name === 'string')."],"exampleFix":"// before\nsetCssVar(themeKey, color) // themeKey is a number\n// after\nsetCssVar(String(themeKey), color)","handlingStrategy":"validation","validationCode":"if (typeof propName !== 'string' || propName.length === 0) {\n  throw new Error('setCssVar requires a non-empty string prop name')\n}","typeGuard":"const isCssVarName = (n) => typeof n === 'string' && n.length > 0","tryCatchPattern":"try {\n  setCssVar(propName, value)\n} catch (err) {\n  if (err instanceof TypeError && /propName/.test(err.message)) {\n    console.error('Invalid CSS var name:', propName)\n  } else throw err\n}","preventionTips":["Define theme variable names as a typed union of string literals.","Run theming code client-side only (onMounted); SSR cannot touch document.body.","Sanitize config-supplied names with String(name) and a whitelist check."],"tags":["typeerror","css-var","dom","argument-validation","quasar"],"backgroundTag":"invalid-css-variable-name","analyzedSha":"4841521b5f635a971eb9e2710e5542efd194691b","analyzedAt":"2026-08-30T01:13:14.944Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}