{"record":{"id":"73c26c66117aadf0","repo":"Meituan-Dianping/mpvue","slug":"invalid-component-name-name-component-names","errorCode":null,"errorMessage":"Invalid component name: \"${name}\". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.","messagePattern":"Invalid component name: \"(.+?)\"\\. Component names can only contain alphanumeric characters and the hyphen, and must start with a letter\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"error","filePath":"src/core/global-api/extend.js","lineNumber":31,"sourceCode":"  Vue.cid = 0\n  let cid = 1\n\n  /**\n   * Class inheritance\n   */\n  Vue.extend = function (extendOptions: Object): Function {\n    extendOptions = extendOptions || {}\n    const Super = this\n    const SuperId = Super.cid\n    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})\n    if (cachedCtors[SuperId]) {\n      return cachedCtors[SuperId]\n    }\n\n    const name = extendOptions.name || Super.options.name\n    if (process.env.NODE_ENV !== 'production') {\n      if (!/^[a-zA-Z][\\w-]*$/.test(name)) {\n        warn(\n          'Invalid component name: \"' + name + '\". Component names ' +\n          'can only contain alphanumeric characters and the hyphen, ' +\n          'and must start with a letter.'\n        )\n      }\n    }\n\n    const Sub = function VueComponent (options) {\n      this._init(options)\n    }\n    Sub.prototype = Object.create(Super.prototype)\n    Sub.prototype.constructor = Sub\n    Sub.cid = cid++\n    Sub.options = mergeOptions(\n      Super.options,\n      extendOptions\n    )\n    Sub['super'] = Super","sourceCodeStart":13,"sourceCodeEnd":49,"githubUrl":"https://github.com/Meituan-Dianping/mpvue/blob/6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b/src/core/global-api/extend.js#L13-L49","documentation":"Fired inside Vue.extend when the component's resolved name (extendOptions.name, falling back to Super.options.name) fails the /^[a-zA-Z][\\w-]*$/ regex check in the dev-only validation branch. The name must start with an ASCII letter and contain only letters, digits, underscores and hyphens; names like '1foo', 'my component' or 'Foo$' are rejected because they cannot be used reliably as custom elements or in templates.","triggerScenarios":"Thrown at src/core/global-api/extend.js:31 when the library encounters an invalid state.","commonSituations":"See trigger scenarios.","solutions":["Rename the component so it starts with a letter and uses only alphanumeric characters, underscores or hyphens (e.g. 'my-component' or 'MyComponent')","If the name came from the base constructor, fix or remove the name in the options passed to Vue.extend","Check for stray whitespace or copy-paste artifacts in the name string in the component definition"],"exampleFix":null,"handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":[],"tags":[],"backgroundTag":null,"analyzedSha":"6c5d78ee04f58c6d782c456dfcf0fe63c0b7f89b","analyzedAt":"2026-09-02T05:17:40.946Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T11:17:12.671Z"}