Vue: vm.$el is an HTML comment (`<!---->`) in Chrome extension Content Script

[mickdekkers]

Vue.js version

2.1.10

Reproduction Link

https://github.com/SoullessWaffle/yaglman/tree/comment-repro

Steps to reproduce

1. $ git clone https://github.com/SoullessWaffle/yaglman.git
2. $ git checkout comment-repro
3. $ npm install
4. $ npm run watch
5. Open Chrome and go to Extensions, ensure Developer mode is checked in the top right
6. Click Load unpacked extension and select the project's dist directory
7. Navigate to any GitHub labels page, e.g. https://github.com/vuejs/vue/labels
8. Open the Chrome console and look at the logs

What is Expected?

vm.$el is a <div id="yaglman"></div> element and a <span>HELLO THERE</span> element appears on the page

What is actually happening?

vm.$el is an HTML comment (<!---->) and no <span>HELLO THERE</span> element appears on the page
No errors are logged.

[znck]

Update your webpack config:

...
resolve: {
  alias: {
    vue$: 'vue/dist/vue.common.js'
...

[ernstki]

If you're utilizing the vue.min.js and you have a template rendering error, the entire $el gets replaced with an HTML comment. (In my case it was because I was following an old Vue tutorial that didn't account for the change from v-on="click:theFunction" to v-on:click="theFunction".)

This seems weird enough that maybe the "Getting Started" guide should mention it—or maybe the comment could say "Vue template error" instead of just empty mysterious nothingness?