CODEWITHSUNDEEP
jsonvue.jswebpackvuexvue-cli-3
sean aye
sean aye

Reputation: 51

vuex store works in dev server but not in production build

I have two (large) javascript Objects that are in separate files in my asset directory. They both need to be imported to my store.js files.

Relevant part of my store.js 

import Vue from 'vue'
import Vuex from 'vuex'
import pathify from 'vuex-pathify'
import {make} from 'vuex-pathify'
import requiredParam from '@/assets/requiredParameters.js'
import optionalParam from '@/assets/optionalParameters.js'

Vue.use(Vuex);

var rp = JSON.parse(JSON.stringify(requiredParam));
var op = JSON.parse(JSON.stringify(optionalParam));

console.log(requiredParam,optionalParam);
console.log(rp,op);

var state = {
    requiredParam: rp,
    optionalParam: op,
    jobId: null,
    jobHistory: null,
    jobStatus: null,
    messages: [],
    geocodeReq: null,
    geocodeModal: false,
};
console.log(state)

const mutations = make.mutations(state);

export default new Vuex.Store({
  plugins: [pathify.plugin],
  state,
  mutations,

  getters: {
    orderLen: (state)=>{
        console.log(state)
        return Object.keys(state.requiredParam.Order).length
    },

    depotLen: (state)=>{
        return Object.keys(state.requiredParam.Depot).length
    },

    routeLen: (state)=>{
        return Object.keys(state.requiredParam.Route).length
    },

  },


})

Everything works perfectly fine in Vue CLI 3 dev server. When I run build and look at the console of the production build everything looks correct until state is logged. Required param and optional param are both undefined even though rp and op are correctly logged in the console.

I know this has something to do with webpack but I have never used it before so I am unsure why this is happening.

Is there a solution to this or a better way to approach the issue?

The Objects need to be in their separate files since they are going to be edited by someone else who has very little javascript knowledge.

Originally the files were .JSON and I tried to 

var state = {
    requiredParam: require('@/assets/requiredParameters.json'),
    optionalParam: require('@/assets/optionalParameters.json'),
    jobId: null,
    jobHistory: null,
    jobStatus: null,
    messages: [],
    geocodeReq: null,
    geocodeModal: false,
};

but this didnt work since webpack did not include the files correctly in the assets folder.

Upvotes: 2

Views: 1260

Answers (1)

sean aye
sean aye

Reputation: 51

I found the problem, it actually had nothing to do with webpack and took me forever to figure out.

The production server was being hosted from a github pages repo that was used for hosting a previous version of the app.

There was a localStorage variable that was still leftover from the previous version that had the same name as a variable the current version uses.

This was causing the store value to be set to an undefined value and since console log only logs the reference to the store, by the time I saw the value it had already been overwritten with null.

Upvotes: 3

Related Questions