类型错误：react__WEBPACK_IMPORTED_MODULE_2___default(...)不是函数,如何解决此问题？

rdrgkggo 于 2023-02-08 发布在 Webpack

关注(0)|答案(8)|浏览(683)

我在使用React时遇到以下错误。
TypeError: react__WEBPACK_IMPORTED_MODULE_2___default(...) is not a function
我该如何解决这个问题？我已经添加了下面的代码。

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;

另一个组成部分是：

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：我输入这个是因为StackOverflow要求我添加一些细节，因为我的问题主要是代码。对不起。

webpack

来源：https://stackoverflow.com/questions/59142136/typeerror-react-webpack-imported-module-2-default-is-not-a-function-ho

8条答案

按热度按时间

inkz8wg91#

我只想指出您从“react”lib导入了两次

// 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

在这里，您实际上是从整个React库导入（export default react），并将其命名为随机字符串useState，然后尝试按照使用真实的的React.useState() API/方法的方式使用它。
因此，您尝试以这种方式像实际的React useState API一样使用useState肯定会导致错误，因为当您导入react lib的默认导入而不是作为默认导出一部分的api时，您基本上是在说require('react')()，或者它本身就是一个导出，您需要在import语句中从lib解构，不确定相关，但你100%有畸形的代码，我不敢相信甚至没有人提到这一点？
再举一个例子，如果你想让它正常工作（尽管eslint现在应该在你点击保存之前就开始抱怨重复导入了），你必须做useState.useState()，这显然不是你想要的。有些人不介意React.useState()，但我个人会避开你，哈哈jk，但是从导入中销毁！！！请（：

***使用最佳编码标准***是成为团队中的优秀软件工程师的关键，甚至在您自己的个人项目中也是如此，这绝对会提高您的DX和整体输出。

希望这对我的兄弟有帮助。我们都经历过这些小怪癖，一旦你学会了，把它添加到你的“我确定知道的事情”列表中，然后继续卡车运输

赞(0）回复(0）举报 2023-02-08

sshcrbum2#

请添加更多信息。例如，您选择导入的API/模块是什么，它是否使用

export default function

对比

export function

你是如何消费的？
您可能已将其导入为

import Something from './something';

然而，您的something.js可能看起来像：

export function Something(){
}

赞(0）回复(0）举报 2023-02-08

nbewdwxp3#

如果您将webpack更新为版本5.x.x，则这可能与output.library setting issue相关
因此，如果Webpack输出中有库设置，请尝试将其删除：

output: {
  path: path.resolve(__dirname, 'build'),
  filename: 'painterro.commonjs2.js',
  library: 'Painterro',  // ⏪ this is the issue
  libraryTarget: 'commonjs2',
 },

赞(0）回复(0）举报 2023-02-08

ghhkc1vu4#

在抛出此错误的文件中发布代码会很有用。根据此信息，可能您导入了一些内容作为默认导入，但没有从相关模块中导出任何内容作为默认导出。尝试调查默认导出，看看其中是否有一个没有默认导出。您可以查找模块文档。

赞(0）回复(0）举报 2023-02-08

m1m5dgzv5#

在类似的情况下，我在Yarn下运行Next时也出现了上述错误。当我添加新页面时，问题出现了。唯一解决它的方法是运行yarn upgrade。

赞(0）回复(0）举报 2023-02-08

smtd7mpg6#

我不知道这是否会帮助任何人，但这个错误的原因之一是，你试图初始化一个函数，这是没有定义。通常发生这种情况是因为你没有正确地导入一个函数。你可以尝试导入一个函数作为import {function}从"库"，而不是import function从"库"。在我的情况下，发生错误的原因是我将getCookie函数从next-cookies中导入为-import getCookie from 'cookies-next'。getCookie不是导出默认函数。我需要做的就是将其导入为-import {getCookie} from 'cookies-next'来解决这个问题。

赞(0）回复(0）举报 2023-02-08

eulz3vhy7#

嗯...在我的情况下...我意识到我忘了把文件的扩展名。所以编译器的行为很奇怪...我把myfilename.js和一切工作正常

赞(0）回复(0）举报 2023-02-08

ru9i0ody8#

安装新的软件包后，也许你还没有重新运行项目

赞(0）回复(0）举报 2023-02-08