1

未捕获的类型错误：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"
  }
}

感谢您提供的任何帮助，

4

1 回答 1

0

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

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

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

于 2020-12-31T17:34:55.333 回答