What causes "Expected a string as propName" in quasarframework/quasar?

Pass the CSS var name as a string without the '--q-' prefix: getCssVar('primary').

quasarframework/quasar · error · TypeError

Expected a string as propName

Error message

Expected a string as propName

What it means

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.

Source

Thrown at ui/src/utils/css-var/get-css-var.js:3

export default function getCssVar(propName, element = document.body) {
  if (typeof propName !== 'string') {
    throw new TypeError('Expected a string as propName')
  }
  if (!(element instanceof Element)) {
    throw new TypeError('Expected a DOM element')
  }

  return (
    getComputedStyle(element).getPropertyValue(`--q-${propName}`).trim() || null
  )
}

View on GitHub (pinned to 4841521b5f)

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.

Example fix

// before
const color = getCssVar(brand.key) // may be non-string
// after
const color = typeof brand.key === 'string' ? getCssVar(brand.key) : null

Defensive patterns

Strategy: type-guard

Validate before calling

if (typeof propName !== 'string') throw new Error('getCssVar requires a string prop name')

Type guard

const isCssVarName = (n) => typeof n === 'string' && n.length > 0

Try / catch

let value = null
try {
  value = getCssVar(propName)
} catch (err) {
  console.warn(`getCssVar('${propName}') failed`, err)
}
// note: value may also be null when the var is simply unset

Prevention

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.

When it happens

Trigger: 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.

Common situations: 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.

Related errors

AI-assisted analysis of quasarframework/quasar@4841521b5f (2026-08-30). Data as JSON: /api/errors/7a3fecfb6ec4b158. Report an issue: GitHub.