Search code examples
webpackvue.jsuglifyjs

[Vue warn]: Invalid component name after uglify

I'm using vue + webpack. While in development mode (hot-reload with expressjs server) everything works fine. In production setup my output.js gets obscured which leads to Vue warnings:

  • [Vue warn]: Do not use built-in or reserved HTML elements as component id: hr
  • [Vue warn]: Invalid component name: "$s". Component names can only contain alphanumeric characters and the hyphen, and must start with a letter.

enter image description here

question: Is there a way to make webpack + uglifyjs compile code so those warning disappear.

I understand that I can remove warning with optimization: { minimize: false} but I still want to obscure my code in production.

Solution

  • So finally I was able to solve my issue as @Charles Dominic mention it turned out that vue-property-decorator that I used w/o name provided is using components using object notation. I should have specified component name in decorator:

      @Component({
    name: 'test',
   })