{"record":{"id":"2ff6a550809d66b8","repo":"quasarframework/quasar","slug":"expected-a-dom-element","errorCode":null,"errorMessage":"Expected a DOM element","messagePattern":"Expected a DOM element","errorType":"exception","errorClass":"TypeError","httpStatus":null,"severity":"error","filePath":"ui/src/utils/css-var/get-css-var.js","lineNumber":6,"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) defaults element to document.body but accepts any Element; it throws this TypeError when the passed element is not an instanceof Element (null, undefined, strings, jQuery objects, or Vue refs). The function uses getComputedStyle(element), which requires a real DOM element.","triggerScenarios":"getCssVar('primary', null); passing a template ref before mount (ref.value === null); passing document (a Document, not an Element); passing a selector string like '#app'; passing a jQuery/DOM wrapper object.","commonSituations":"Calling inside setup() before the component mounts so the ref is still null; SSR where document is undefined; passing window.document instead of document.body.","solutions":["Wait until the element exists: call inside onMounted and use ref.value.","Pass a real DOM node: getCssVar('primary', document.querySelector('#app')).","Unwrap Vue refs: getCssVar('primary', elRef.value) after mount.","Omit the second argument to use the default document.body."],"exampleFix":"// before\nonBeforeSetup: const color = getCssVar('primary', elRef.value) // null, throws\n// after\nonMounted(() => {\n  const color = getCssVar('primary', elRef.value)\n})","handlingStrategy":"type-guard","validationCode":"if (!(element instanceof Element)) throw new Error('getCssVar requires a DOM element')","typeGuard":"const isDomElement = (el) => el instanceof Element","tryCatchPattern":"let value = null\ntry {\n  value = getCssVar('primary', elRef.value)\n} catch (err) {\n  if (err instanceof TypeError && /DOM element/.test(err.message)) {\n    value = getCssVar('primary') // fall back to document.body\n  } else throw err\n}","preventionTips":["Access template refs only inside onMounted (or later), not during setup/before mount.","Use document.querySelector() to convert selector strings into real elements.","Unwrap Vue refs (elRef.value) — the ref object itself is not an Element.","Omit the element argument when you actually want document.body."],"tags":["typeerror","css-var","dom-element","argument-validation","quasar"],"backgroundTag":"invalid-dom-element","analyzedSha":"4841521b5f635a971eb9e2710e5542efd194691b","analyzedAt":"2026-08-30T01:13:14.944Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}