Module parse failed: Unexpected token (1:0) vue.js vuex store

Question

Can't figure out this error with vuex store and vue.js:

Is this a webpack-cli thing? or am i not doing something right? Thanks for the help!

Module parse failed: /Users/me/sites/vue/src/components/SectionView.Vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
|   <ul class="listing">
|      <li v-for="item in $store.state.items">

 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/PanelBody.vue 3:0-56
 @ ./src/components/PanelBody.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Panel.vue
 @ ./src/components/Panel.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Accordion.vue
 @ ./src/components/Accordion.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Sidebar.vue
 @ ./src/components/Sidebar.vue
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/components/Body.vue
 @ ./src/components/Body.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

My SectionView.vue file:

<template>
  <ul class="listing">
     <li v-for="item in $store.state.items">
       <router-link :to="{ name: 'item', params: { id: item.id }}">
         <img :src="item.image" />
         <br>{{ item.name }}
       </router-link>
     </li>
   </ul>
</template>

<script>
import Item from '../components/Item',
export default {
  name: 'SectionView',
  components: {
    'item': Item
  },
  created () {
    this.$store.dispatch('fetch')
  }
},
}
</script>

My Item.vue:

<template>
  <div id="section-view">
    <div class="item-view">
      <router-link class="back-listing" :to="{name: 'section'}">U+0003C</router-link>
      <div class="item">
        <h1>{{ item.name }}</h1>
        </div>
    </div>
</template>

<script>
export default {
  name: 'item',
  computed: {
    item: function () {
      return this.$store.state.items.find(item => item.id === this.$route.params.id)
    }
  },
  created () {
    this.$store.dispatch('open', this.$route.params.id)
  }
}
</script>

My store which is in a src/store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const db = [
  { id: 'a', name: 'Item #1', image: 'http://lorempicsum.com/simpsons/350/200/1' },
  { id: 'b', name: 'Item #2', image: 'http://lorempicsum.com/simpsons/350/200/2' },
  { id: 'c', name: 'Item #3', image: 'http://lorempicsum.com/simpsons/350/200/3' }
]

const store = new Vuex.Store({

  state: {
    items: [],
    opened: {}
  },

  actions: {
    fetch: function ({commit, state}, payload) {
      commit('SET_LIST', db) // Just clone the array
    },
    open: function ({commit, state}, payload) {
      // look for item in local state
      var localItem = state.items.find(item => payload === item.id)
      if (!localItem) {
        new Promise(function (resolve, reject) {
          return db.find(item => payload === item.id)
        })
        .then(result => {
          commit('ADD_ITEM', result)
        })
      }
    }
  },

  mutations: {
    SET_LIST: function (state, payload) {
      Vue.set(state, 'items', payload)
    },
    ADD_ITEM: function (state, playload) {
      state.items.push()
    }
  }

})

console.log('State', store)
export default store

And my main.js calling the store:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import store from './store'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

Answer 1

Like @MateenRay said the ".Vue" instead ".vue" really could be the issue.

This is all about your operating system.

On windows "FILE.txt" and "file.txt" are the same. So when calling you vue file upper or down case it doesn't matter.

But for linux "FILE.txt" and "file.txt" are two separate files ! So calling your ".Vue" file is not the same as calling the ".vue" one.

Its important to remember this because on my project we were on windows and didn't pay attention to this. Next we changed all our file names from "file" to "File". Next we had to deliver it on a linux machine and nothing was working because some files were not found... Some of us were still importing files like the following :

import file from ... instead of import File from ...

It was working on windows but not on linux.