unexpected token error importing a vuex store to laravel page

Question

New-ish to Vue nd extremely new to Vuex. Im trying to import a store to my main page from which all my components branch out, but I keep getting an "unexpected token {" error in the browser console. I read through the documentation, but I cant find anything that would address this issue. I have tried changing every bit of syntax I can, and it doesnt seem to make a difference. The brackets around store in the import appear to be the problem, but when I remove them, i just get a new "unexpected identifier", or an "unexpected string" error. Am I importing it incorrectly? This format works fine on all my components, just not on this new vue instance.

vuex-test.blade.php

@extends('core.core_layouts.core_blank')

@section('browsertitle')
@endsection

@section('top-css')
@endsection

@section('breadcrumb')
@endsection


@section('main')
  <component :is="currentView" v-bind="currentProperties"></component>
@endsection


@section('bottom-js')
<script>

    import { store } from './../stores/store1.js';

    var app = new Vue({
        el:"#app",
        store,
        data: {
        currentView: 'org-list',
        choseOrg: {{ $org }},
    },  // end data
    computed: {
        currentProperties: function() {
            if (this.currentView === 'org-list') { return { } }
            if (this.currentView === 'add-org') { return { parentOrg: '' } }
        }
    },   
    mounted : function() {
    }, // end mounted
    methods: {
    }, // end methods
    components: {
    },
});
</script>
@endsection

store1.js

export const store = new Vuex.Store({
  state: {
    safelyStoredNumber: 'ret',
    count: 2,
  },
  mutations: {
    setOrgIdentity(state, orgID) {
    state.OrgID = orgID
    }
  }
 });

Where do you get that error? At the browser? Also, can you show the source for store1.js? — acdcjunior
– acdcjunior, Commented Mar 23, 2018 at 1:49
sorry, the question wasn't as complete as it should have been. I have updated it with store1.js nd the complete file where it isnt working. — 7tacos
– 7tacos, Commented Mar 23, 2018 at 14:53
import won't work there. Try changing import { store } from './../stores/store1.js'; to something like <script src="./../stores/store1.js"></script> (change the path to what is more appropriate) and in store1.js do: window.store = new Vuex.Store({. — acdcjunior
– acdcjunior, Commented Mar 23, 2018 at 15:21

acdcjunior · Accepted Answer · 2018-03-23 15:45:04Z

1

Per comments:

Yes, I get the error at the browser.

import won't work there. It is meant to run on node.js, during the build phase of a vue-cli-based project.

If you are deploying the code directly to browser, you will need to use code that is supported by the browser. In this case, the solution to import other JavaScript files is standard <script> tags.

So, in your code, change:

import { store } from './../stores/store1.js';

to something like (change the path to what is more appropriate):

<script src="./../stores/store1.js"></script>

And in store1.js (because export is too meant for node.js), replace:

export const store = new Vuex.Store({

With:

window.store = new Vuex.Store({

answered Mar 23, 2018 at 15:45

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

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

Collectives™ on Stack Overflow

unexpected token error importing a vuex store to laravel page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related