Exported module is undefined after importing

Question

This was all working, and I made some change and now it my service is undefined.

I have a basic service in my _service folder

import config from 'config';
import { authHeader } from '../_helpers';

export const subscriptionService = {
    getFullMenu
};

function getFullMenu() {
    const requestOptions = {
        method: 'GET',
        headers: authHeader()
    };

    return fetch(`${config.apiUrl}/subscriptions/fullmealselection`, requestOptions).then(handleResponse);
}

function logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('user');
}

function handleResponse(response) {
    return response.text().then(text => {
        const data = text && JSON.parse(text);
        if (!response.ok) {
            if (response.status === 401) {
                // auto logout if 401 response returned from api
                logout();
                location.reload(true);
            }

            const error = (data && data.message) || response.statusText;
            return Promise.reject(error);
        }

        return data;
    });
}

I have a basic module

import subscriptionService from '../_services/subscription.service';

export const subscriptions = {
    namespaced: true,
    state: {
        fullMenu: {}
    },
    actions: {
        getFullMenu({ commit }) {
            commit('fullMenuRequest');
            subscriptionService.getFullMenu()
                .then(
                    items => commit('fullMenuSuccess', items),
                    error => commit('fullmenuFailure', error)
                );
        }
    },
    mutations: {
        fullMenuRequest(state) {
            state.fullMenu = { loading: true };
        },
        fullMenuSuccess(state, items) {
            state.fullMenu = { items: items };
        },
        fullMenuFailure(state, error) {
            state.fullMenu = { error };
        }
    }
}

In the app, when I call the getFullMenu method on the module it says cannot read property getFullMenu of undefined

I've verified it gets to the module, and in the module if I alert() subscriptionService it says undefined. I'm at a loss as to what the problem is.

For comparison my authentication service works fine. I've compared the two and they seem the same to me.

import { userService } from '../_services';
import { router } from '../_helpers';

const user = JSON.parse(localStorage.getItem('user'));
const initialState = user ? { status: { loggedIn: true }, user } : { status: {}, user: null };

export const authentication = {
    namespaced: true,
    state: initialState,
    actions: {
        login({ dispatch, commit }, { email, password }) {
            commit('loginRequest', { email });

            userService.login(email, password)
                .then(
                    user => {
                        commit('loginSuccess', user);
                        router.push('/profile');
                    },
                    error => {
                        commit('loginFailure', error);
                        dispatch('alert/error', error, { root: true });
                    }
                );
        },
        logout({ commit }) {
            userService.logout();
            commit('logout');
        }
    },
    mutations: {
        loginRequest(state, user) {
            state.status = { loggingIn: true };
            state.user = user;
        },
        loginSuccess(state, user) {
            state.status = { loggedIn: true };
            state.user = user;
        },
        loginFailure(state) {
            state.status = {};
            state.user = null;
        },
        logout(state) {
            state.status = {};
            state.user = null;
        }
    }
}

Answer 1

You exported the service as a named export, but you are importing it as a default export. Since the default export does not exist, subscriptionService is undefined, hence the error cannot read property getFullMenu of undefined

Your export

export const subscriptionService = {
    getFullMenu
};

Your import

import subscriptionService from '../_services/subscription.service';

What your import should be:

import { subscriptionService } from '../_services/subscription.service';

Or

What your export could be:

 export default {
     getFullMenu
 };

Look up: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export