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

Question

所以，这是我的 Api 服务组件，我正在使用 Axios：

import api from './Api.vue';

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

和一些 Feed 组件

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

有人可以帮忙吗？

Answer 1

看起来 Feed.vue 中定义的 AppFeedService 并不是真正的组件，它只是您要调用的服务的集合。由于您已将其定义为组件，因此该组件必须在某处 实例化，这在大多数情况下意味着您在另一个组件的 template 中使用了它。

您可以将其定义为一个对象。

import api from './Api.js';

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

您的 Api.vue 文件可能也是如此。您只需要在定义实际组件时使用 .vue 文件。

然后在您的 Feed 组件中

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

总而言之：.vue 文件格式用于定义单个文件组件。当您实际定义单个文件组件时，您只需要一个 .vue 文件（可能会在不同组件的 template 中使用的东西）。如果您只想要一个包含方法集合或某些状态的对象，只需使用简单的 javascript.

来定义它

Answer 2

我得到的错误与 Webpack编译错误：TypeError: WEBPACK_IMPORTED_MODULE_1 … is not a function 在 ReactJS 中。当您从任何其他文件导入任何定义的变量/组件作为组件时，通常会出现这种类型的错误。在 React 中，我们将组件导入为

import ComponentName from '/componentPath';

因此，如果它不是我们要导入的组件，请尝试使用导入作为对象

import { componentName } from '/componentPath';

{ } 是对象的铭牌。

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

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

javascript

file-upload

webpack

vue.js

vue-loader