Meituan-Dianping/mpvue · error
Do not use built-in or reserved HTML elements as component i
Error message
Do not use built-in or reserved HTML elements as component id: ${id} What it means
Dev-only warning in initAssetRegisters when registering a component via Vue.component(): the id passed matches config.isReservedTag, i.e. a built-in or HTML element name (div, button, etc.). Registering such an id would shadow native elements in templates, so the registration is warned against and skipped.
Source
Thrown at src/core/global-api/assets.js:22
import { ASSET_TYPES } from 'shared/constants'
import { warn, isPlainObject } from '../util/index'
export function initAssetRegisters (Vue: GlobalAPI) {
/**
* Create asset registration methods.
*/
ASSET_TYPES.forEach(type => {
Vue[type] = function (
id: string,
definition: Function | Object
): Function | Object | void {
if (!definition) {
return this.options[type + 's'][id]
} else {
/* istanbul ignore if */
if (process.env.NODE_ENV !== 'production') {
if (type === 'component' && config.isReservedTag(id)) {
warn(
'Do not use built-in or reserved HTML elements as component ' +
'id: ' + id
)
}
}
if (type === 'component' && isPlainObject(definition)) {
definition.name = definition.name || id
definition = this.options._base.extend(definition)
}
if (type === 'directive' && typeof definition === 'function') {
definition = { bind: definition, update: definition }
}
this.options[type + 's'][id] = definition
return definition
}
}
})
}View on GitHub (pinned to 6c5d78ee04)
Solutions
- Rename the component to an id that is not a native HTML tag (e.g. my-button)
- Follow multi-word component naming to avoid all reserved-tag collisions
Defensive patterns
Strategy: validation
When it happens
Trigger: Thrown at src/core/global-api/assets.js:22 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/954278254ec1181a.
Report an issue: GitHub.