Question

我在react-bootstrap项目中使用create-react-app。它使用react-router-dom和redux进行路由和状态管理。我正在为该页面添加新路线login和新组件。并且出现以下错误。

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `LoginPage`.

我尝试将组件名称从Login更改为LoginPage，并将文件扩展名从jsx更改为js，但是没有任何效果。

import React, { Component } from 'react';

import { Form, Button } from 'react-bootstrap';

class LoginPage extends Component {
  render() {
    return (
      <div>
        <Form>
          <Form.Group controlId="formBasicEmail">
            <Form.Label>Email address</Form.Label>
            <Form.Control type="email" placeholder="Enter email" />
            <Form.Text className="text-muted">
              We'll never share your email with anyone else.
            </Form.Text>
          </Form.Group>

          <Form.Group controlId="formBasicPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" placeholder="Password" />
          </Form.Group>
          <Form.Group controlId="formBasicChecbox">
            <Form.Check type="checkbox" label="Check me out" />
          </Form.Group>
          <Button variant="primary" type="submit">
            Submit
          </Button>
        </Form>
      </div>
    )
  }
}

export default LoginPage;

这是LoginPage.jsx文件的代码。

预期结果：应该没有错误。

软件包：

"dependencies": {
    "axios": "^0.19.0",
    "babel-jest": "24.7.1",
    "bootstrap": "3.3.7",
    "chartist": "0.10.1",
    "immutable": "^4.0.0-rc.12",
    "node-sass": "4.12.0",
    "react": "16.8.6",
    "react-bootstrap": "0.32.4",
    "react-chartist": "0.13.3",
    "react-dom": "16.8.6",
    "react-google-maps": "9.4.5",
    "react-notification-system": "0.2.17",
    "react-redux": "^7.1.1",
    "react-router": "5.0.0",
    "react-router-dom": "5.0.0",
    "react-scripts": "3.0.0",
    "react-toggle": "4.0.2",
    "redux-saga": "^1.0.5"
  },

Answer 1

此问题已在react-bootstrap 1.0.0-beta.2中解决。 package.json中的版本为0.32.4。

在此CodeSandbox中，您可以看到组件正确渲染（JS或JSX），但仅当最低react-bootstrap版本为1.0.0-beta.2。时才显示。

更新为：

npm i react-bootstrap@latest --save

元素类型无效：使用react-bootstrap

1 个答案: