{"record":{"id":"0613a0c8893c9840","repo":"Meituan-Dianping/mpvue","slug":"cannot-find-element-el","errorCode":null,"errorMessage":"Cannot find element: ${el}","messagePattern":"Cannot find element: (.+?)","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/platforms/web/util/index.js","lineNumber":16,"sourceCode":"/* @flow */\n\nimport { warn } from 'core/util/index'\n\nexport * from './attrs'\nexport * from './class'\nexport * from './element'\n\n/**\n * Query an element selector if it's not an element already.\n */\nexport function query (el: string | Element): Element {\n  if (typeof el === 'string') {\n    const selected = document.querySelector(el)\n    if (!selected) {\n      process.env.NODE_ENV !== 'production' && warn(\n        'Cannot find element: ' + el\n      )\n      return document.createElement('div')\n    }\n    return selected\n  } else {\n    return el\n  }\n}\n","sourceCodeStart":1,"sourceCodeEnd":26,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/web/util/index.js#L1-L26","documentation":"Vue's query() util resolves the mount target: when el is a string selector it calls document.querySelector. If nothing matches, Vue warns 'Cannot find element: <selector>' and substitutes an empty detached <div>, so the app mounts into a throwaway node instead of the intended element (usually nothing becomes visible).","triggerScenarios":"new Vue({ el: '#app' }) (or $mount('#app')) where no element with that selector exists in the DOM at call time — the script ran before the DOM was parsed, the id/class is misspelled, or the element is inside a not-yet-rendered section.","commonSituations":"Loading a bundle in <head> without defer/DOMContentLoaded; typo in the selector; mounting into an element added later by another script; SPA mounted into a container removed by a prior framework; SSR/hydration mismatches where the element is absent.","solutions":["Move the script to the end of <body> or add defer, or wrap mount in DOMContentLoaded so the target exists first.","Verify the selector string matches an existing element id/class exactly (case-sensitive ids).","Mount to document.body or an explicitly created element if the target should be generated.","Check that no other script removes or replaces the target element before mounting."],"exampleFix":"// before\n// <head> inline script\nnew Vue({ el: '#app', render: h => h(App) })\n// after\ndocument.addEventListener('DOMContentLoaded', () => {\n  new Vue({ el: '#app', render: h => h(App) })\n})","handlingStrategy":"validation","validationCode":"function requireMountTarget(selector) {\n  const el = document.querySelector(selector)\n  if (!el) throw new Error('Mount target not found: ' + selector)\n  return el\n}\n// new Vue({ el: requireMountTarget('#app') ... }) — throws before Vue substitutes a dummy div","typeGuard":"function elementExists(el) {\n  return typeof el === 'string' ? document.querySelector(el) !== null : el instanceof Element\n}","tryCatchPattern":"try {\n  new Vue({ el: '#app', render: h => h(App) })\n} catch (e) {\n  console.error('Mount failed:', e.message)\n}","preventionTips":["Load app scripts with defer or at the end of <body>.","Wrap mounting in DOMContentLoaded when scripts load early.","Double-check selector spelling and case against the actual DOM.","Never replace/remove the mount container before initializing the app."],"tags":["vue","dom","mount","selector"],"backgroundTag":"mount-element-not-found","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}