VUE: Module parse failed: Unexpected token (1:0)

user_6787022 0
Viewed 9398

In the Net Ninja Vue Tutorial 19 on YouTube, I am going through nested components where I wish to display a ul list using v-for and v-bind: key.

I keep getting the following error and it won't compile. I am new to Vue, can Guru out there please help me out here. Currently, my vue version is @vue/cli 4.4.6 and the npm is at 6.13.4.

<template>
    <ul>
        <li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
    </ul>
</template>

<script>
export default {
  data () {
    return {
      ninjas: ['Ryu','Ken','Yoshi']
    }
  }
}
</script>

ERROR

ERROR in ./src/Ninjas.Vue
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|     <ul>
|         <li v-for="(ninja, index) in ninjas" v-bind:key="index"></li>
 @ ./src/main.js 3:0-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
vuejs2 vue-component vue.js
5 Answers

You need also to check if you have added the below code in your webpack.mix.js file:

 mix.js('resources/js/app.js', 'public/js').vue();

We added the .vue() function because now with latest update, webpack configurations are changed so we need to make changes according to it.

Hope it helps someone out

user_133957170

add in .vue() to my web pack worked for me

mix.js('resources/js/landing/quote.js', 'public/js/landing').vue();
user_72746750

First there's nothing wrong with the code in Ninjas.Vue

the problem is in the filename Ninjas.Vue should be renamed to Ninjas.vue

  • because component in vue ends with an extension .vue , lowercase
user_110418830

In Laravel 8 if you want to compile Vue, before running make sure you have installed "vue-template-compiler" & "vue-loader" with npm.

If it's not installed try this:

npm install vue-template-compiler

npm install vue-loader

Now you can run npm run watch.

user_94581550

just add mix.js('resources/js/app.js', 'public/js').vue() and run command

npm install vue-loader@^16.2.0 --save-dev --legacy-peer-deps

then remove this errors

user_46267840
Related