Weird ESLint errors in vue-cli projects

If you’re getting weird errors such as the one below:

Module Warning (from ./node_modules/eslint-loader/index.js):
error: Parsing error: Unexpected token < at src/components/ChatApp.vue:1:1:
> 1 | <template>
    | ^
  2 |     <div>
  3 |           <div v-for="message in messages">
  4 |                   

You may need to install eslint-plugin-vue.

This tells ESLint about *.vue files, and how they are formatted. The error above is ESLint getting confused, because it doesn’t understand the structure of Vue’s single file components. Installing the eslint-plugin-vue module makes ESLint aware of *.vue files.

Posted in: Vue

Leave a Reply

Your email address will not be published. Required fields are marked *