I have a server.js file that opens a database with node. I'm trying to import this into an index.js file through a lib directory and I have two files in it:

// 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() })
    })
}

This gives me:

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

I didn't think it would make much of a difference, but on line three of the App.js file I added two curly brackets to make it import {addName} from "util";.

This then gives me the error: TypeError: Object(...) is not a function. Both of these are pointing to line 13 of App.js, await addName(name);. Now, I'm exporting the addName(name) function from `util.js, so I don't understand what this error is.

When I googled the errors, it seemed to lead me to answers that didn't really work for my situation.

I have a server.js file that opens a database with node. I'm trying to import this into an index.js file through a lib directory and I have two files in it:

// 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() })
    })
}

This gives me:

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

I didn't think it would make much of a difference, but on line three of the App.js file I added two curly brackets to make it import {addName} from "util";.

This then gives me the error: TypeError: Object(...) is not a function. Both of these are pointing to line 13 of App.js, await addName(name);. Now, I'm exporting the addName(name) function from `util.js, so I don't understand what this error is.

When I googled the errors, it seemed to lead me to answers that didn't really work for my situation.

• javascript
• reactjs
• webpack

• Does this answer your question? TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function. How do I solve this? – Dhrumil shah Commented Jan 8, 2021 at 6:22
• Not quite.. I see what the first answer is saying I think, but as I'm only importing one thing from each place, I'm that answer doesn't work in this situation. – user5491053 Commented Jan 8, 2021 at 6:37

1 Answer 1

With

import addName from "util";

you're importing the default export from util. But what you exported was a named export here:

export function addName(name) {

Either use a default export instead:

export default function addName(name) {

Or import the named one instead:

import { addName } from 'util';