web-dev-qa-db-ja.com

Webpackコンパイルエラー：TypeError：__WEBPACK_IMPORTED_MODULE_1__…は関数ではありません

つまり、これは私のApiサービスコンポーネントであり、Axiosを使用しています。

import api from './Api.vue';

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

といくつかのフィードコンポーネント

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);
        });
    }
}

そして今エラー：

TypeError: __WEBPACK_IMPORTED_MODULE_1__api_Feed_vue___default.a.getPosts is not a function

誰か助けてもらえますか？

javascriptfile-uploadwebpackvue.jsvue-loader
5
Lukas

Feed.vueで定義されているAppFeedServiceは実際にはコンポーネントではなく、呼び出すサービスのコレクションにすぎません。コンポーネントとして定義したので、コンポーネントはインスタンス化のどこかになければなりません。これは、ほとんどの場合、別のコンポーネントのtemplateで使用したことを意味します。

代わりに、それをオブジェクトとして定義できます。

import api from './Api.js';

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

Api.vueファイルについても同様です。実際のコンポーネントを定義する場合は、.vueファイルのみを使用する必要があります。

次に、フィードコンポーネントで

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

要約すると、.vueファイル形式は、単一のファイルcomponentsを定義するためのものです。 .vueファイルは、実際に単一のファイルコンポーネント（別のコンポーネントのtemplateで使用される可能性のあるもの）を定義する場合にのみ必要です。メソッドのコレクションまたはいくつかの状態を含むオブジェクトが必要な場合は、プレーンなJavaScriptでそれを定義します。

5
Bert