英文:
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'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"
]
}
}
</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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论