更新我得到的所有依赖项：元素类型无效：预期为字符串或类/函数（对于复合组件）但得到：未定义

Question

I am trying to solve that error and I spent hours trying to fix it. I updated all my dependencies from a project that used material-ui , so I migrated to @material-ui/core because the first is deprecated. I have a copy of that project (No code changes) and in the non-updated project I don't get the error.

When I updated everything I got the follow error:

Error: 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.

Here is my class:

import React, { Component } from "react";
import { connect } from "react-redux";
import AppBar from '@material-ui/core/AppBar';
import Dialog from "@material-ui/core/Dialog";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { vehicleSnapshot, setCurrentZone, fetchVehicles } from "../../actionCreators";
import Logo from "../../img/favicon.svg";
import LogoPng from "../../img/logo.png";
import socketIOClient from "socket.io-client"
import windowSize from "react-window-size";
import Cameras from "../dump/SnapModal";
import _ from "lodash"
import "../../app/styles.css"
import { Close as CloseIcon } from "@material-ui/icons";
import Slide from '@material-ui/core/Slide';


function Transition(props) {
  return <Slide direction="up" {...props} />;
}


class SnapModal extends Component {

  state = {
    open: true,
    tabValue: "video",
    tab: "list",
    id: "",
    openVideo: true,
    isLoading: false,
    endPoint: socketIOClient("http://35.161.135.38:8080")
  };

  actionCamera = (id, action) => {
    const options = {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        "vehicle_id": id,
        "action": action,
        "zone": this.props.zone.id,
        "user_id": this.props.user.uid
      }),
    };
    return fetch("http://35.161.135.38:8080/api/monitoring/actioncamera", options)
  }

  selectTab = (tabValue, tab = this.state.tab, type, ) => async () => {
    this.setState({ openVideo: false })
    this.state.endPoint.emit("watching",
      {
        uid: this.props.user.uid,
        vehicle_id: this.props.retrieveVehicles[`${this.props.user.company}_${type}`].id,
        zone: this.props.zone.id
      })
    if (this.state.id) {
      await this.actionCamera(this.state.id, false)
        .then((response) => {
          this.setState({ tabValue, tab, id: type, isLoading: true });
          this.actionCamera(type, true)
            .then((response) => {
              console.log(response);
              this.setState({ isLoading: false });
            })
            .catch((error) => {
              console.log(error);
            });
        })
    } else {
      this.setState({ tabValue, tab, id: type, isLoading: true });
      this.actionCamera(type, true)
        .then((response) => {
          console.log(response);
          this.setState({ isLoading: false });
        })
        .catch((error) => {
          console.log(error);
        });
    }
  }

  handleClose = () => {
    this.setState({ openVideo: true })    
    this.state.endPoint.close()
    if (this.state.id) {
      this.actionCamera(this.state.id, false);
    }
    this.setState({ id: "" })
    this.actionCamera(this.state.id, false);
    this.props.closeModal();
  };

  imgUrl = () => {
    if (!this.props.liveRecording) return null;
    if (!!this.props.retrieveVehicles && this.state.id) {
      return this.props.retrieveVehicles[`${this.props.user.company}_${this.state.id}`].src;
    }
  };

  renderTabs = () => {
    let { windowWidth, retrieveVehicles } = this.props;
    if (windowWidth > 600) {
      return (
        <React.Fragment>
          <AppBar
            position="static"
            style={{
              background:
                "linear-gradient(45deg, rgb(33, 150, 243) 30%, #3ab7aa 90%",
              width: "100%",
              height: "3.44rem",
              overflowX: "hidden",
              overflowY: "hidden"
            }}
          >
            <Tabs value={false} style={{ margin: "1vw", marginBlockStart: "auto" }}>
              <img
                src={Logo}
                alt="Smartseals"
                style={{
                  paddingLeft: "10px",
                  paddingBottom: "2px",
                  width: 30,
                  height: "auto"
                }}
              />
              {!!retrieveVehicles && Object.values(retrieveVehicles).map((e, i) => (
                <div key={i}>
                  {this.state.isLoading ? <Tab label={e.id} onClick={this.selectTab("video", "grid", e.id)} disabled />
                    : <Tab label={e.id} onClick={this.selectTab("video", "grid", e.id)} />
                  }
                  <Tab
                    style={{
                      position: "absolute",
                      right: "1%"
                    }}
                    icon={<CloseIcon />}
                    onClick={this.handleClose}
                  />

                </div>
              ))}
            </Tabs>
          </AppBar>
          {this.state.isLoading ?
            <div className="smartseals-loader-div"> <img className="smartseals-loading" src={LogoPng}></img><h2>Cargando video de la Brigada {this.state.id}</h2></div> :
            <div>{
              !this.state.openVideo ?
                <Cameras
                  responsive={false}
                  videos={this.imgUrl()}
                  tab={this.state.tab}
                /> :
                <h1 style={{
                  display: "flex",
                  flexDirection: "row",
                  paddingTop: "15%",
                  justifyContent: "center"
                }}>Choose a vehicle for start streaming</h1>
            }
            </div>
          }
        </React.Fragment>
      );
    }
    return (
      <div>
        <AppBar
          position="static"
          style={{
            background:
              "linear-gradient(45deg, rgb(33, 150, 243) 30%, #3ab7aa 90%",
            display: "flex",
            width: "100%",
            height: "auto"
          }}
        >
          <Tabs value={false} style={{ margin: "1vw", marginBlockStart: "auto", display: "flex" }}>
            {!!retrieveVehicles && Object.values(retrieveVehicles).map((e, i) => (
              <div>
                {this.state.isLoading ? <Tab label={e.id} onClick={this.selectTab("video", "list", e.id)} disabled />
                  : <Tab label={e.id} onClick={this.selectTab("video", "list", e.id)} />
                }
                <Tab
                  style={{
                    position: "absolute",
                    right: "1%"
                  }}
                  icon={<CloseIcon />}
                  onClick={this.handleClose}
                />

              </div>
            ))}
          </Tabs>
        </AppBar>
        <div style={{ overflow: "scroll" }}>
          {
            !this.state.openVideo ?
              <Cameras
                responsive={false}
                videos={this.imgUrl()}
                tab={this.state.tab}
              /> :
              <h1 style={{
                display: "flex",
                flexDirection: "row",
                paddingTop: "15%",
                justifyContent: "center"
              }}>Choose a vehicle for start streaming</h1>
          }
        </div>
      </div>
    );
  };

  render() {

    return (
      <div>
        <Dialog
          fullScreen
          open={this.props.liveRecording || false}
          transition={Transition}
          aria-labelledby="alert-dialog-slide-title"
          aria-describedby="alert-dialog-slide-description"
        >
          {this.renderTabs()}
        </Dialog>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    liveRecording: state.vehicles.liveRecording
  };
};

const mapDispatchToProps = dispatch => ({
  closeModal() {
    dispatch(vehicleSnapshot(false));
  },
  setCurrentZone(zoneId) {
    dispatch(setCurrentZone(zoneId));
  },
  fetchVehicles(zone) {
    dispatch(fetchVehicles(zone));
  }
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(windowSize(SnapModal));

The error is indicated in the line of single setState :

if (this.state.id) {
 ...
} else {
      this.setState({ tabValue, tab, id: type, isLoading: true });
      this.actionCamera(type, true)
        .then((response) => {          
----->     this.setState({ isLoading: false });
        })
        .catch((error) => {
          console.log(error);
        });
    }

My newest package.json :

{
  "name": "smart_tracking",
  "version": "2.0.0",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "author": "Smartseals Co",
  "license": "ISC",
  "dependencies": {
    "@material-ui/core": "^4.8.2",
    "@material-ui/icons": "^4.5.1",
    "axios": "^0.19.0",
    "bootstrap": "^4.4.1",
    "chalk": "^3.0.0",
    "chart.js": "^2.9.3",
    "classnames": "^2.2.6",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "firebase": "^7.6.1",
    "firebase-admin": "^8.9.0",
    "hls.js": "^0.13.0",
    "json-server": "^0.15.1",
    "lodash": "^4.17.15",
    "material-ui": "^0.20.2",
    "material-ui-icons": "^1.0.0-beta.36",
    "moment": "^2.24.0",
    "prop-types": "^15.7.2",
    "re-resizable": "^6.1.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.16",
    "react-chartjs-2": "^2.8.0",
    "react-csv": "^1.1.2",
    "react-dom": "^16.12.0",
    "react-file-download": "^0.3.5",
    "react-google-maps": "^9.4.5",
    "react-icons": "^3.8.0",
    "react-redux": "^7.1.3",
    "react-responsive-carousel": "^3.1.51",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.3.0",
    "react-split-pane": "^0.1.89",
    "react-window-size": "^1.2.2",
    "recompose": "^0.30.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "socket.io": "^2.3.0",
    "socket.io-client": "^2.3.0",
    "video-react": "^0.14.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

如果您已经更新了所有内容，那么您必须检查语法，或者您可能必须在 setState 之前将获取结果转换为 json