您好，我在使用路由器和 RSUITE 库进行 REACT 时遇到以下错误：

如何解决您好，我在使用路由器和 RSUITE 库进行 REACT 时遇到以下错误：

未捕获的类型错误：react__WEBPACK_IMPORTED_MODULE_0__.React 未定义

更新 webpack 等至少到现在都没有解决任何问题。

   <anonymous> webpack:///./src/App.js?:18
   js http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:10747
   __webpack_require__ http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:790
   fn http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:101
   <anonymous> webpack:///./src/index.js?:7
   js http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:10771
   __webpack_require__ http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:790
   fn http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:101
   <anonymous> webpack:///multi_(webpack)-dev-server/client?:3
   0 http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:10782
   __webpack_require__ http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:790
   <anonymous> http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:857
   <anonymous> http://0.0.0.0:3100/app.bundle.js?d13ee6312591030d86a4:860

这是我的表单组件：ModalForm.js 底部注释中的 3 行是不幸的尝试。

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import { Form,FormGroup,FormControl,ControlLabel,HelpBlock } from 'rsuite';

class ModalDemo extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        formValue: {
          name: '',email: '',password: '',textarea: ''
        },show: false
      };
      this.close = this.close.bind(this);
      this.open = this.open.bind(this);
      this.handleChange = this.handleChange.bind(this);
    }
    close() {
      this.setState({ show: false });
    }
    open() {
      this.setState({ show: true });
    }
    handleChange(value) {
      this.setState({
        formValue: value
      });
    }
    render() {
      return (
        <div>
          <Modal show={this.state.show} onHide={this.close} size="xs">
            <Modal.Header>
              <Modal.Title>New User</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <Form
                fluid
                onChange={this.handleChange}
                formValue={this.state.formValue}
              >
                <FormGroup>
                  <ControlLabel>Username</ControlLabel>
                  <FormControl name="name" />
                  <HelpBlock>required</HelpBlock>
                </FormGroup>
                <FormGroup>
                  <ControlLabel>Email</ControlLabel>
                  <FormControl name="email" type="email" />
                  <HelpBlock>required</HelpBlock>
                </FormGroup>
                <FormGroup>
                  <ControlLabel>Password</ControlLabel>
                  <FormControl name="password" type="password" />
                </FormGroup>
                <FormGroup>
                  <ControlLabel>Textarea</ControlLabel>
                  <FormControl
                    rows={5}
                    name="textarea"
                    componentClass="textarea"
                  />
                </FormGroup>
              </Form>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={this.close} appearance="primary">
                Confirm
              </Button>
              <Button onClick={this.close} appearance="subtle">
                Cancel
              </Button>
            </Modal.Footer>
          </Modal>
          <Button onClick={this.open}>New User</Button>
        </div>
      );
    }
  }
  
  //export default ModalDemo;
  //ReactDOM.render(<ModalDemo />);

  //export default () => {return ModalDemo()}

这是我的 App.js，其中 我无法导入课程...

import {React,Component} from 'react';
import { HashRouter as Router,Switch,Route,Link,useLocation } from 'react-router-dom';
import { Nav} from 'rsuite';
import ModalDemo from './ModalForm';

// eslint-disable-next-line react/display-name
const NavLink = React.forwardRef((props,ref) => {
  const location = useLocation();
  return (

    <Nav.Item {...props} ref={ref} active={props.to === location.pathname} componentClass={Link} />
  );
});

export default function App() {

  

  return (
    

    <Router>
      <div>
        <Nav justified>
          <NavLink to="/">Home</NavLink>
          <NavLink to="/about">About</NavLink>
          <NavLink to="/users">Users</NavLink>
        </Nav>

        <Switch>
          <Route path="/about">
          <About />
          </Route>
          <Route path="/users">
            <Users />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>

        <ModalDemo />

      </div>
    </Router>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Users() {
  return <h2>Users</h2>;
}

这是我的 package.json 文件：

{
  "private": true,"version": "0.1.0","scripts": {
    "dev": "webpack-dev-server --mode development --progress --hot","build": "rm -rf dist && webpack --mode production --progress  --display-modules"
  },"dependencies": {
    "date-fns": "^2.0.0-beta.5","moment": "^2.29.1","react": "^16.11.0","react-dom": "^16.11.0","react-router-dom": "^5.1.2","rsuite": "^4.2.1","webpack-merge": "^5.7.3","webpack-multiple-themes-compile": "^2.0.0"
  },"devDependencies": {
    "@babel/core": "^7.0.0","@babel/preset-env": "^7.0.0","@babel/preset-react": "^7.0.0","babel-loader": "^8.0.0","babel-plugin-lodash": "^3.3.2","css-loader": "^1.0.0","html-webpack-plugin": "^3.2.0","less": "^3.8.1","less-loader": "^4.1.0","mini-css-extract-plugin": "^0.4.3","style-loader": "^0.20.3","webpack": "^4.20.2","webpack-cli": "^3.1.2","webpack-dev-server": "^3.1.9"
  }
}

感谢您提供的任何帮助

解决方法

React 是您需要像这样导入的默认导出 import React from 'react';

在你的情况下，你需要像这样写你的声明import React,{Component} from 'react';

将 React 导入保留在花括号之外。