{"record":{"id":"7e264b6449b756b0","repo":"Meituan-Dianping/mpvue","slug":"invalid-template-option-template","errorCode":null,"errorMessage":"invalid template option:${template}","messagePattern":"invalid template option:(.+?)","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/platforms/web/entry-runtime-with-compiler.js","lineNumber":52,"sourceCode":"  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 */\n      if (process.env.NODE_ENV !== 'production' && config.performance && mark) {\n        mark('compile')\n      }\n\n      const { render, staticRenderFns } = compileToFunctions(template, {\n        shouldDecodeNewlines,\n        delimiters: options.delimiters,\n        comments: options.comments\n      }, this)\n      options.render = render","sourceCodeStart":34,"sourceCodeEnd":70,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/platforms/web/entry-runtime-with-compiler.js#L34-L70","documentation":"Vue's $mount with the runtime-with-compiler build resolves the `template` option by trying selector string, innerHTML string, or DOM node. If the template option is set to something none of these branches can handle (e.g. a number, function, boolean, or null when el is also absent), the compiler cannot proceed and warns 'invalid template option'. The library throws it because a template it cannot interpret means it cannot produce a render function.","triggerScenarios":"Calling `new Vue({ template: <non-string, non-node> })` then `$mount()`, e.g. `template: 123`, `template: someComponent`, `template: null`, or passing a compiled render template object instead of a string/DOM element.","commonSituations":"Passing a Vue component object as `template` instead of putting it in `components`; typos like `template: this.someTemplate` where the value is undefined at mount time; using the runtime-only build where the compiler entry path differs; migrating from templates to render functions and leaving a stale template value.","solutions":["Ensure `template` is either a string (selector starting with '#', or an HTML string) or a DOM element (has nodeType).","If you meant to render a component, register it via `components` and use it in the template, not as the template value.","If the template comes from a variable, check it is defined and is a string before mounting.","If you don't need a template, remove the option and use `render: h => h(...)` instead (runtime-only builds don't compile templates anyway)."],"exampleFix":"// before\nnew Vue({ template: myComponent, el: '#app' })\n// after\nnew Vue({\n  el: '#app',\n  components: { myComponent },\n  template: '<my-component/>'\n})","handlingStrategy":"validation","validationCode":"const opts = { template: myTemplate }\nconst isValidTemplate = t => typeof t === 'string' || (t && typeof t.nodeType === 'number')\nif (!isValidTemplate(opts.template)) {\n  throw new TypeError('template option must be a selector/HTML string or a DOM node, got: ' + typeof opts.template)\n}","typeGuard":"function isValidTemplate(t) {\n  return typeof t === 'string' || (t != null && typeof t.nodeType === 'number')\n}","tryCatchPattern":null,"preventionTips":["Only pass strings or DOM nodes to the template option.","Use `render` functions with the runtime-only build where template compilation isn't available.","Register sub-components via `components` instead of assigning them as `template`.","Log the template value right before mounting when it comes from dynamic sources."],"tags":["vue","template","mount","compiler","configuration"],"backgroundTag":"invalid-template-option","analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}