quasarframework/quasar · error · TypeError
Expected a string as value
Error message
Expected a string as value
What it means
setCssVar(propName, value, element) requires value to be a string because it is passed directly to element.style.setProperty(). It throws this TypeError when value is a number, object, null, or undefined — even if it looks like a color.
Source
Thrown at ui/src/utils/css-var/set-css-var.js:6
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
- Pass a CSS value string: setCssVar('primary', '#f37b26').
- Convert RGB objects with colors.rgbToHex(rgb) before setting.
- Coerce numbers: setCssVar(name, String(value)).
- Validate/normalize the theme config so values are always strings.
Example fix
// before
setCssVar('primary', colors.textToRgb('#f00')) // object, throws
// after
setCssVar('primary', colors.rgbToHex(colors.textToRgb('#f00'))) Defensive patterns
Strategy: validation
Validate before calling
if (typeof value !== 'string') throw new Error('setCssVar requires a string value') Type guard
const isCssValue = (v) => typeof v === 'string' && v.length > 0
Try / catch
try {
setCssVar('primary', value)
} catch (err) {
if (err instanceof TypeError && /as value/.test(err.message)) {
setCssVar('primary', String(value))
} else throw err
} Prevention
- Serialize colors with colors.rgbToHex() before assigning to CSS vars.
- Keep theme config values as strings ('#f37b26'), never numbers or RGB objects.
- Add a schema validation step (e.g. zod) on theme config loaded from JSON.
When it happens
Trigger: setCssVar('primary', 0xff0000); setCssVar('primary', { r: 243, g: 123, b: 38 }); setCssVar('primary') with no value; passing a colors.textToRgb() object instead of a string.
Common situations: Reading colors from JSON/config as numbers or RGB objects; forgetting to serialize a computed color with rgbToHex(); passing undefined because an upstream variable was never assigned.
Related errors
- Expected a string as propName
- Expected a string as propName
- 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/0d623c53d0780ccc.
Report an issue: GitHub.