TypeError: util__WEBPACK_IMPORTED_MODULE_4___default(...) 不是函数

Question

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

// 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。这两个错误都指向App.js的第13行，即await addName(name);。现在，我从`util.js`中导出了addName(name)函数，所以我不明白这个错误是什么意思。

当我搜索这些错误时，似乎并没有找到适用于我的情况的答案。

- user5491053

---

这个回答解决了你的问题吗？TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) 不是一个函数。我该如何解决？ - Dhrumil shah

不完全正确。我明白第一个答案的意思，但是由于我只从每个地方导入一件东西，所以我认为那个答案在这种情况下不适用。 - user5491053

Answer 1

使用

import addName from "util";

你正在从 util 导入默认导出项，但是你在这里导出的是一个命名导出项：

export function addName(name) {

可以使用默认导出：

export default function addName(name) {

或者直接导入该命名的组件：

import { addName } from 'util';

- CertainPerformance

---

尝试使用 import { addName } from "util"; 和 export default function addName(name) 后，它仍然给了我相同的问题。 - user5491053

“util” 真的在 “node_modules” 中吗？这是唯一需要使用裸路径的时候。如果它与您的 “App.js” 在同一个目录中，您应该使用 import { addName } from './util' 或 import addName from './util' 导入它 - 前面带有 ./。 - CertainPerformance