I have Vue.js app and call API function from Vue component. The code looks as following:

1. component.vue:

<script>
import gpbApi from '@/utils/api/gpbApi';

methods: {
    async load() {
        const result = await gpbApi.catalogProducts.getList(this.entityId);
        this.typesOfApplication = result;
    },

2. gpbApi.js:

import catalogProducts from './catalogProducts';

export default {
    catalogProducts,
};

3. catalogProducts.js:

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost/client/';

export async function getList(entityId) {
    if (entityId == null) return;
    const { data } = await axios.get(`api/getList?id=${entityId}`);
    return data;
}

gpbApi.js and catalogProducts.js files are placed in /utils/api/ folder.

I've got the following error:

mounted hook (Promise/async) TypeError: Cannot read properties of undefined (reading 'getList')
    at VueComponent.load (component.vue:103:1)

How to overcome this issue?

CodePudding user response：

You are using a default import although you didn't declare the default export.

Either use:

import * as gpbApi from '@/utils/api/gpbApi';

or

import { getList } from '@/utils/api/gpbApi';