{"record":{"id":"b430eb012793f27f","repo":"Meituan-Dianping/mpvue","slug":"template-element-not-found-or-is-empty-options","errorCode":null,"errorMessage":"Template element not found or is empty: ${options.template}","messagePattern":"Template element not found or is empty: (.+?)","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/platforms/web/entry-runtime-with-compiler.js","lineNumber":42,"sourceCode":" /* istanbul ignore if */\n if (el === document.body || el === document.documentElement) {\n process.env.NODE_ENV !== 'production' && warn(\n `Do not mount Vue to or - mount to normal elements instead.`\n )\n return this\n }\n\n const options = this.$options\n // resolve template/el and convert to render function\n if (!options.render) {\n let template = options.template\n if (template) {\n if (typeof template === 'string') {\n if (template.charAt(0) === '#') {\n template = idToTemplate(template)\n /* istanbul ignore if */\n if (process.env.NODE_ENV !== 'production' && !template) {\n warn(\n `Template element not found or is empty: ${options.template}`,\n this\n )\n }\n }\n } else if (template.nodeType) {\n template = template.innerHTML\n } else {\n if (process.env.NODE_ENV !== 'production') {\n warn('invalid template option:' + template, this)\n }\n return this\n }\n } else if (el) {\n template = getOuterHTML(el)\n }\n if (template) {\n /* istanbul ignore if */","sourceCodeStart":24,"sourceCodeEnd":60,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/web/entry-runtime-with-compiler.js#L24-L60","documentation":"When the `template` option is a string starting with '#', Vue treats it as a CSS selector/id and fetches the element's innerHTML as the template. If no element matches (or it is empty), a dev-mode warning is emitted and compilation proceeds without a usable template.","triggerScenarios":"new Vue({ template: '#my-template' }) or component template '#id' where the id selector matches nothing (element removed, script placed after app init, typo in id, or empty element).","commonSituations":"x-template script blocks deleted or moved by bundlers; templates defined after Vue instantiation; SPA route renders clearing the DOM before mount; id typos.","solutions":["Verify an element with that id exists and is non-empty BEFORE creating the Vue instance.","Define the template inline as a string instead of referencing an id.","Ensure the exists before init","handlingStrategy":"validation","validationCode":"function assertTemplateElementExists (selector) {\n const el = document.querySelector(selector)\n if (!el || !el.innerHTML.trim()) {\n throw new Error('Template element not found or is empty: ' + selector)\n }\n}\nassertTemplateElementExists('#tpl-user')","typeGuard":"const templateExists = (sel) => {\n const el = typeof sel === 'string' && sel.charAt(0) === '#' ? document.querySelector(sel) : null\n return !!el && el.innerHTML.trim().length > 0\n};","tryCatchPattern":null,"preventionTips":["Ensure x-template script blocks are declared before app init","Prefer inline string templates over id references","Check id spelling and DOM removal by routes/bundlers","Verify template availability in a smoke test before mounting"],"tags":["vue","template","mounting"],"backgroundTag":"vue-template-element-not-found","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}