{"record":{"id":"7a3fecfb6ec4b158","repo":"quasarframework/quasar","slug":"expected-a-string-as-propname","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/get-css-var.js","lineNumber":3,"sourceCode":"export default function getCssVar(propName, element = document.body) {\n  if (typeof propName !== 'string') {\n    throw new TypeError('Expected a string as propName')\n  }\n  if (!(element instanceof Element)) {\n    throw new TypeError('Expected a DOM element')\n  }\n\n  return (\n    getComputedStyle(element).getPropertyValue(`--q-${propName}`).trim() || null\n  )\n}\n","sourceCodeStart":1,"sourceCodeEnd":13,"githubUrl":"https://github.com/quasarframework/quasar/blob/4841521b5f635a971eb9e2710e5542efd194691b/ui/src/utils/css-var/get-css-var.js#L1-L13","documentation":"getCssVar(propName, element) reads a Quasar CSS custom property (--q-<propName>) from an element's computed style. It throws this TypeError when propName is not a string. A second guard (see the 'Expected a DOM element' error) validates the element parameter.","triggerScenarios":"getCssVar(123), getCssVar(), getCssVar(someEnumNumber), or passing a Symbol/object as propName. Also thrown in SSR since the default parameter document.body evaluation fails or document is undefined.","commonSituations":"Reading brand colors ('primary', 'negative') for chart libraries at module top level during SSR; passing an enum/numeric constant instead of the string name; typo where propName was never defined.","solutions":["Pass the CSS var name as a string without the '--q-' prefix: getCssVar('primary').","Coerce dynamic values: getCssVar(String(propName)).","Call it only in browser context (onMounted in Vue) to avoid SSR document errors.","Handle the null return (property not set) rather than passing wrong types."],"exampleFix":"// before\nconst color = getCssVar(brand.key) // may be non-string\n// after\nconst color = typeof brand.key === 'string' ? getCssVar(brand.key) : null","handlingStrategy":"type-guard","validationCode":"if (typeof propName !== 'string') throw new Error('getCssVar requires a string prop name')","typeGuard":"const isCssVarName = (n) => typeof n === 'string' && n.length > 0","tryCatchPattern":"let value = null\ntry {\n  value = getCssVar(propName)\n} catch (err) {\n  console.warn(`getCssVar('${propName}') failed`, err)\n}\n// note: value may also be null when the var is simply unset","preventionTips":["Never pass the '--q-' prefix — just the bare name like 'primary'.","Call after mount in browser context; the default document.body breaks under SSR.","Type prop names as string literals (union type) to catch wrong types at compile time."],"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"}