TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function. How do I solve this?

Question

I was using React when I got the following error.

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

How do I solve this? I have added the code below.

import React from 'react';
import LoginForm from './loginForm'
import useState from "react"

function LoginPage(){
    const[details, setDetails] = useState({
        username: '',
        password: ''
    });
    function handleChange(event){
        const updatedDetails = {...details, [event.target.name]: event.target.value};
        setDetails(updatedDetails)
    }
    return(<LoginForm details={details} onChange={handleChange}/>)
};

export default LoginPage;

The other component is :-

import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Jumbotron, Container } from 'reactstrap';
import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

function FormPage(props){
  return (
    <Jumbotron fluid>
    <Container fluid>
    <center><h1 className="display-3"> Log IN</h1></center>
    <p className="lead">Please Enter your Details Here</p>
    </Container><br />
    <Container fluid>
    <Form>
        <FormGroup>
            <Label for="username">Username</Label>
            <Input type="textarea" name="username" id="username" placeholder="Enter your Username Here" value={props.details.username} onChange={props.onChange}></Input>
        </FormGroup>
        <FormGroup>
            <Label for="password">Password</Label>
            <Input type="password" name="password" id="password" placeholder="Enter your Password Here" value={props.details.username} onChange={props.onChange}></Input>
        </FormGroup>
        <Button color="success">Submit</Button>
    </Form>
    </Container>
    </Jumbotron>
  );
};

export default FormPage;

PS: I am typing this because StackOverflow is asking me to add some more details as my question is mostly code. Sorry.

Answer 1

I am just going to point out you are importing from "react" lib twice

// You have: (look closely at libs you are importing from and how)
import React from 'react';
import LoginForm from './loginForm'
import useState from "react"

// Should be:
import React, { useState } from 'react';
import LoginForm from './loginForm'

// Why?
// Because useState is one of React libs' export default's apis / methods
// aka useState is just a part of the React default export but also is itself, an export
// React.useState() is how it would look if you just imported the React lib itself and nothing else
// how I personally handle any react apis is via ==> 
import React, { useState } from 'react

// apart from loving seeing all libraries and individual apis imported 
// as soon as I see a file to get a sense of its potential functionalities, 
// read my detailed explanation below

Here, you are literally importing (export default react) from the entire React lib and simply naming it a random string useState and then trying to use that how you use the real React.useState() api/method.

So you trying to use useState like the actual React useState api in this manner will absolutely cause an error because you are basically saying this require('react')() when you import the default import of react lib versus an api that is part of that default export, or it is itself an export in which you need to deconstruct from the lib in the import statement, not sure related but you 100% have malformed code I cannot believe no one even mentioned this?

For further example, for it to work as you have it (although eslint should be screaming about duplicate imports by now before you even hit save) you would have to do useState.useState(), which clearly is not what you want. Some people don't mind React.useState() but I personally will shun you haha jk, but destruct from import!!! please (:

Using Best Coding Standards is key to being a great software engineer on a team and even in your own personal projects for all of the reasons, and will absolutely increase your DX and output overall.

Hope this helped my dude. We all have gone through these little quirks that once you learn, add that to your "things I know for sure" list and keep trucking

Answer 2

Please add more information. Like what was the API/module you choose to import and is it using

export default function

vs

export function

How you are consuming it?

You might have importing it as

import Something from './something';

Whereas, your something.js might look like:

export function Something(){
}