Webpack compile error: TypeError: __WEBPACK_IMPORTED_MODULE_1__ … is not a function

Question

So, this my Api Service Component, I'm using Axios:

import api from './Api.vue';

export default {
    name: 'app-feed-service',
    methods: {
        getPosts() {
            return api.get('posts/');
        }
    }
}

and some feed component

import AppSinglePost from './../Feed/Post.vue';
import AppFeedService from './../../api/Feed.vue';

export default {
    name: 'app-posts',
    components: {
        AppSinglePost
    },
    data() {
        return {
            posts: []
        }
    },
    created() {
        AppFeedService.getPosts().then((res) => {
            console.log(res);
        });
    }
}

and now the error:

TypeError: __WEBPACK_IMPORTED_MODULE_1__api_Feed_vue___default.a.getPosts is not a function

can anybody help?

Answer 1

It looks like AppFeedService as defined in Feed.vue is not really a component, it's just a collection of services you want to call. Since you have defined it as a component, the component would have to be instantiated somewhere, which in most cases would mean you used it in another component's template.

You can just define it as an object instead.

import api from './Api.js';

export default {    
    getPosts() {
        return api.get('posts/');
    }
}

Same thing for your Api.vue file likely. You only need to use a .vue file when you are defining an actual component.

Then in your feed component just

import AppFeedService from './../../api/Feed.js';

To summarize: the .vue file format is meant for defining single file components. You only need a .vue file when you are actually defining a single file component (something that would probably be used in the template of a different component). If you just want an object that contains a collection of methods or some state, just define it with plain javascript.