Meituan-Dianping/mpvue · error

Invalid component name: "${name}". Component names can only

Error message

Invalid component name: "${name}". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

What it means

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.

Source

Thrown at src/core/global-api/extend.js:31

  Vue.cid = 0
  let cid = 1

  /**
   * Class inheritance
   */
  Vue.extend = function (extendOptions: Object): Function {
    extendOptions = extendOptions || {}
    const Super = this
    const SuperId = Super.cid
    const cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {})
    if (cachedCtors[SuperId]) {
      return cachedCtors[SuperId]
    }

    const name = extendOptions.name || Super.options.name
    if (process.env.NODE_ENV !== 'production') {
      if (!/^[a-zA-Z][\w-]*$/.test(name)) {
        warn(
          'Invalid component name: "' + name + '". Component names ' +
          'can only contain alphanumeric characters and the hyphen, ' +
          'and must start with a letter.'
        )
      }
    }

    const Sub = function VueComponent (options) {
      this._init(options)
    }
    Sub.prototype = Object.create(Super.prototype)
    Sub.prototype.constructor = Sub
    Sub.cid = cid++
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    )
    Sub['super'] = Super

View on GitHub (pinned to 6c5d78ee04)

Solutions

1. Rename the component so it starts with a letter and uses only alphanumeric characters, underscores or hyphens (e.g. 'my-component' or 'MyComponent')
2. If the name came from the base constructor, fix or remove the name in the options passed to Vue.extend
3. Check for stray whitespace or copy-paste artifacts in the name string in the component definition

When it happens

Trigger: Thrown at src/core/global-api/extend.js:31 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of Meituan-Dianping/mpvue@6c5d78ee04 (2026-09-02). Data as JSON: /api/errors/73c26c66117aadf0. Report an issue: GitHub.