类型错误：Webpack 导入的模块不是函数

Question

我有一个计算工作班次的后端。我正在尝试使用服务/班次中的模块发布一些必需的用户输入。 getAll 方法工作正常，但发布会引发错误

类型错误：_services_shifts__WEBPACK_IMPORTED_MODULE_2__.default.postData 不是函数

换档服务模块：

 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}

我有一个按钮，可以在单击时触发以下调用代码：

 import shiftService from './services/shifts'

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

当执行到 shiftService.postData 时，抛出错误。

我真的很困惑，因为我基本上是在复制我的一些有效的旧项目，但在这里我只是找不到问题。预先感谢您帮助新人！

原文由 Saplu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

好的，我对解决方案感到尴尬。我只是从错误的文件夹中编辑早期版本的 shiftService，而导入的服务中只有 get 方法…

所以如果放置正确，我的代码实际上可以工作。感谢您的宝贵时间，也感谢您分享同样有效的替代方法。

原文由 Saplu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

模块提供特殊 的默认导出（“默认导出”） 语法，使 “每个模块一个东西”的 方式看起来更好。 每个文件可能只有一个导出默认值。在下面的示例中我们可能会忽略类的名称。

  //Module1
export default class{
}

然后导入它而不用任何名称的大括号：

 //Module2
import anyname from './Module1'

您的情况不同，有两个功能。您可以导出默认的一个功能

export default getAll

并正常导出其他功能。

 export postData

并且在导入时

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

或者

在Shiftservice模块中去掉 default 这里并正常导出：

 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}

在你的模块中导入

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

或者

import * as shiftService from './Module1'

然后使用 shiftServer.postData()

原文由 M A Salman 发布，翻译遵循 CC BY-SA 4.0 许可协议