Imported functions are undefined

Question

I am using Webpack via Vue CLI and am getting a Error in created hook: "TypeError: _api__WEBPACK_IMPORTED_MODULE_0__.default.$_playerApi_getPlayers is not a function" error when I try to use my page.

Here is my tree structure:

.
+ main.js
+ app/
|  + api.js
|  + App.vue
|  + players/
|  |  + api.js
|  |  + index.js
|  |  + routes.js
|  |  + components/
|  |  |  + index.js
|  |  |  + Login.vue
|  |  |
|  |  + vuex/
|  |     + actions.js
|  |     + ...
|  |
|  + others/
|     + api.js
|     + ...
|
+ ...

app/players/vuex/actions.js:

import { default as api } from '../../api'

export default {

  loadPlayers({ commit }) {
    return api.$_playerApi_getPlayers().then(response => {  // <--- ERROR LINE
      commit('STORE_PLAYERS', response.body)
      return response
    })
    .catch(error => {
      throw error
    })
  },

  loadPlayer({ commit }, playerId) {
    return api.$_playerApi_getPlayer(playerId).then(response => {
      commit('LOAD_PLAYER', response.data)
      return response
    })
    .catch(error => {
      throw error
    })
  },

  ...

}

app/players/api.js:

export default {

  ...

  $_playerApi_getPlayer(playerId = '') {
    ...
  },

  $_playerApi_getPlayers() {
    ...
  },

  ...

}

app/api.js:

import { api as players } from './players'

export default {
  players,
}

I'm pretty sure this is wrong (obv.) but am not sure how to get it to work properly.

What am I doing wrong here? The exports and imports seem OK, but they're breaking somehow that I just can't see or debug.

I've tried using the following in my app/api.js but this is wrong because the export is not an array:

import { api as players } from './players'

export default {
  ...players,
}

I've also tried using the following in my app/players/api.js but it didn't work, either:

export default {

  methods: {

    ...

    $_playerApi_getPlayer(playerId = '') {
      ...
    },

    $_playerApi_getPlayers() {
      ...
    },

    ...

  },

}

Answer 1

In your app/api.js:

import * as players from './players/api'
export default {
  ...players,
} 

and in your app/players/api.js:

export function $_playerApi_getPlayer(playerId = '') {
   ...
}

export function $_playerApi_getPlayers() {
   ...
}