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

file-upload, javascript, vue-loader, vue.js, webpack

Solution

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.

Problem

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?

Original source