CODEWITHSUNDEEP
javascriptfile-uploadwebpackvue.jsvue-loader
Lukas
Lukas

Reputation: 7734

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

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?

Upvotes: 16

Views: 61706

Answers (3)

Abubeker Mohammed
Abubeker Mohammed

Reputation: 31

I was facing similar error in next.js, the reason was that I was trying to import client component to server component(which by default next.js components are) so when I added "use client"; in the importing file it works. Hope it helps.

Upvotes: 2

TheLazyLad
TheLazyLad

Reputation: 41

I was getting the exact same error as Webpack compile error: TypeError: WEBPACK_IMPORTED_MODULE_1 … is not a function in ReactJS. This type of error you get usually when you are importing any defined variable/ component from any other file as Component. In react we import component as

import ComponentName from '/componentPath';

so if it isn't a component we are importing then try using importing as an Object

import { componentName } from '/componentPath';

The { } are the nameplates for an Object.

Upvotes: 3

Bert
Bert

Reputation: 82489

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.

Upvotes: 6

Related Questions