reactjs - Hello, I'm having the following error in REACT working with Router and the RSUITE library :

Question

Uncaught TypeError: react__WEBPACK_IMPORTED_MODULE_0__.React is undefined

Updating webpack and so on doesn't resolve anything at least until now.

   <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

This is my form component: ModalForm.js The 3 lines in comment at the bottom are unlucky tries.

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()}

And this my App.js in which I can't import classes...

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>;
}

And this is my package.json file:

{
  "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"
  }
}

Thanks for any help you may provide,

Answer 1

React is the default export which you need to import like this import React from 'react';

In your case you need to write your statement like this import React, {Component} from 'react';

Keeping the React import outside of the curly braces.