TypeError: Webpack imported module is not a function

Question

I have a backend that calculates work shifts. I am trying to post some required user input with a module in services/shifts. The getAll method works fine, but posting throws an error

TypeError: _services_shifts__WEBPACK_IMPORTED_MODULE_2__.default.postData is not a function

Shiftservice module:

import axios from 'axios'
const baseUrl = '...'

const getAll = () => {
    const request = axios.get(baseUrl)
    return request.then(response => response.data)
}
const postData = newObject => {
    const request = axios.post(baseUrl, newObject)
    return request.then(response => response.data)
}

export default {getAll, postData}

I have a button that triggers the following calling code on click:

import shiftService from './services/shifts'

  const postData = (event) => {
    event.preventDefault()
    const sampleObject = {
      sampleField: sample
    }
    shiftService
      .postData(sampleObject)
      .then(returnedData => {
        console.log(returnedData)
      })
}

When execution reaches shiftService.postData, the error is thrown.

I am really confused since I am basically copying some older project of mine which works, but here I just don't find the problem. Thank you in advance for helping a newcomer!

Answer 1

Modules provide special export default (“the default export”) syntax to make the “one thing per module” way look better. There may be only one export default per file .And we may neglect the name of the class in the following example.

 //Module1
export default class{
}

And then import it without curly braces with any name:

//Module2
import anyname from './Module1' 

Your scenario is different having two functions.You can either export default one function

export default getAll

and normal export the other function.

export postData

and when importing

import{ default as getAll,postData} from './yourModule'

OR

Remove default here in Shiftservice module and export normally:

import axios from 'axios'
const baseUrl = '...'

const getAll = () => {
    const request = axios.get(baseUrl)
    return request.then(response => response.data)
}
const postData = newObject => {
    const request = axios.post(baseUrl, newObject)
    return request.then(response => response.data)
}

export {getAll, postData}

Importing in your module

import {getAll,PostData} from './Module1'

or

import * as shiftService from './Module1'

and then use shiftServer.postData() .....

Answer 2

Okay, I am embarrassed of the solution. I was just editing an earlier version of shiftService from a wrong folder, and the imported service only had the get method in it...

So my code actually works if placed correctly. Thank you for your time, and thanks for sharing alternative ways that must work aswell.

Answer 3

I think its becuse your declaring the function as arrow functions and export it this way:

export default {getAll, postData}

you need to declare them as a normal functions

function postData(){
}

that should work