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 }
})

Doctor · Accepted Answer · 2018-07-27 12:07:07Z

3

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.

answered Jul 27, 2018 at 12:07

Doctor

8,0865 gold badges44 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

aydow · Accepted Answer · 2018-06-25 12:26:23Z

2

/Users/me/sites/vue/src/components/SectionView.Vue

I think the name SectionView.Vue should be SectionView.vue

components extensions are vue

edited Jun 25, 2018 at 12:26

aydow

3,8313 gold badges27 silver badges41 bronze badges

answered Jun 25, 2018 at 10:48

Mateen Ray

1172 silver badges4 bronze badges

Comments

PrakashG · Accepted Answer · 2019-02-01 21:07:16Z

1

For me, reinstalling babel and webpack fixed this issue.

npm install babel-core babel-loader babel-preset-es2015 webpack --save-devnpm install babel-core babel-loader babel-preset-es2015 webpack --save-dev

Link

edited Feb 1, 2019 at 21:07

PrakashG

1,6506 gold badges21 silver badges30 bronze badges

answered Feb 1, 2019 at 12:44

Akshay Bharambe

867 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related