0

The Vuex store was starting to get a bit crowded so I decided to break it into modules. However, the code breaks after compiling with the following error

Uncaught TypeError: Cannot read property 'customS' of null

This is my invitations module

export const state = {
    customS: null };

export const getters = {
    getInvitations: (state) => state.customS, };

export const mutations = {
    setcustomS: (state, customS) => state.customS= customS};

and this is how I import it inside the store

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex);

// Load store modules dynamically.
const requireContext = require.context('./modules', false, /.*\.js$/);

const modules = requireContext.keys()
    .map(file =>
        [
            file.replace(/(^.\/)|(\.js$)/g, ''),
            requireContext(file),
        ]
    )
    .reduce((modules, [
        name,
        module,
    ]) => {
        if (module.namespaced === undefined) {
            module.namespaced = true;
        }

        return { ...modules, [name]: module, };
    }, {});

console.log(modules);

export const store = new Vuex.Store({
    plugins: [
        createPersistedState(),
    ],
    modules,
});

Project is using the laravel and vue combination. Thanks in advance.

Dusan Veljovic
  • 1
  • does it work when you import it by hand instead of the fancy require.context magic? – Linus Borg Jul 20 '18 at 14:03
  • @LinusBorg it does work once I import the modules manually – Dusan Veljovic Jul 20 '18 at 14:29
  • Then I suspect that it has somethign to do with how esModules work i webpack when using `import` vs. `require()`. Can you share what exactly you get in the console whne you log that modules object? – Linus Borg Jul 23 '18 at 09:33
  • hm, I've already rewritten the code, however, the object had the list of all modules, and each of the modules had its getters/setteres...as atributes – Dusan Veljovic Jul 24 '18 at 07:48

0 Answers0