Trying a simple demo to explore VueJS components, but encountering an error when loading the page: Unexpected Token Import in this line
import GISView from './components/GISView.vue';
If I remove this line, GISView is not defined. Using Laravel 5.4 and webpack for scripts compilation. Why can't the component be found?
Main.js
import GISView from './components/GISView.vue';
window.Vue = Vue;
window.Event = new class {
constructor() {
this.Vue = new Vue();
}
fire(event, data = null) {
this.Vue.$emit(event, data);
}
listen(event, callback) {
this.Vue.$on(event, callback);
}
};
window.app = new Vue({
el: '#app',
components: {
GISView: GISView
},
data: {
},
methods: {
init: function() {
this.$broadcast('MapsApiLoaded');
}
}
});
GISView.vue
<script>
import GoogleMaps from '../mixins/GoogleMaps.js';
export default {
mixins: [GoogleMaps]
}
</script>
Despite what seems like correct code, been stuck on this issue for hours.