英文:

Updating all dependencies I got: Element type is invalid: expected a string or a class/function (for composite components) but got: undefined

问题

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 following 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: "

<details>
<summary>英文:</summary>

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&#39;t get the error.

When I updated everything I got the follow error: 

&gt; Error: Element type is invalid: expected a string (for built-in
&gt; components) or a class/function (for composite components) but got:
&gt; undefined. You likely forgot to export your component from the file
&gt; it&#39;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"
]
}
}

</details>
# 答案1
**得分**: 0
如果您已经更新了所有内容，那么您需要检查语法，或者您可能需要在setState之前将获取的结果转换为JSON。
<details>
<summary>英文:</summary>
If you have updated everything, then you have to check syntax, or may be you have to convert the fetch result into json before setState
</details>