quasarframework/quasar · error · TypeError

Expected a string as propName

Error message

Expected a string as propName

What it means

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.

Source

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

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

  element.style.setProperty(`--q-${propName}`, value)
}

View on GitHub (pinned to 4841521b5f)

Solutions

1. Pass the brand/variable name as a string: setCssVar('primary', '#f37b26').
2. Coerce: setCssVar(String(propName), value).
3. Run only in browser context (onMounted / client-only code).
4. Validate config-driven names before calling (typeof name === 'string').

Example fix

// before
setCssVar(themeKey, color) // themeKey is a number
// after
setCssVar(String(themeKey), color)

if (typeof propName !== 'string' || propName.length === 0) {
  throw new Error('setCssVar requires a non-empty string prop name')
}

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

try {
  setCssVar(propName, value)
} catch (err) {
  if (err instanceof TypeError && /propName/.test(err.message)) {
    console.error('Invalid CSS var name:', propName)
  } else throw err
}

When it happens

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

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

Related errors

• Expected a string as propName
• Expected a string as value
• Expected a DOM element
• Expected a DOM element
• Expected a string or a {r, g, b[, a]} object as bgColor

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