I encountered a
Error in created hook: "TypeError: _api__WEBPACK_IMPORTED_MODULE_0__.default.$_playerApi_getPlayers is not a function"Below is the structure of my project directory:
.
+ 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 => {
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 am struggling to figure out what's causing this error and how to fix it. The exports and imports seem correct, but something is breaking that I can't identify or troubleshoot.
I attempted the following approach in my app/api.js, but I realized it was incorrect since the export should not be an array:
import { api as players } from './players'
export default {
...players,
}
I also tried the following in my app/players/api.js, but unfortunately, it did not resolve the issue either:
export default {
methods: {
...
$_playerApi_getPlayer(playerId = '') {
...
},
$_playerApi_getPlayers() {
...
},
...
},
}