类型错误：util__WEBPACK_IMPORTED_MODULE_4___default(...) 不是函数

Question

我有一个server.js使用节点打开数据库的文件。我试图通过lib目录将其导入到 index.js 文件中，其中有两个文件：

// App.js
import React from 'react';
import addName from "util";

function App() {
  const [name, setName] = React.useState("")

  function handleUpdate(evt) {
    setName(evt.target.value);
  }

  async function handleAddName(evt) {
    await addName(name);
  }

  return <div>
    <p><input type='text' value={name} onChange={handleUpdate} /></p>
    <button className='button-style' onClick={handleAddName}>Add Name</button>
  </div>
}

export default App;

// util.js
import "isomorphic-fetch"

export function addName(name) {
    return fetch('http://localhost:3001/add-time', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name, time: Date.now() })
    })
}

这给了我：

TypeError: util__WEBPACK_IMPORTED_MODULE_4___default(...) is not a function.

我认为这不会产生太大的影响，但在文件的第三行，App.js我添加了两个大括号以使其成为import {addName} from "util";.

然后这给了我错误：TypeError: Object(...) is not a function。这两个都指向 ,的第13 行。现在，我正在从 util.js 导出该函数，所以我不明白这个错误是什么。App.jsawait addName(name);addName(name)

当我用谷歌搜索这些错误时，它似乎引导我找到了并不适合我的情况的答案。

Answer 1

和

import addName from "util";

您正在从导入默认util导出。但您导出的是此处的命名导出：

export function addName(name) {

要么使用默认导出：

export default function addName(name) {

或者导入指定的名称：

import { addName } from 'util';