我得到这个错误:
Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
这是我的代码:
var React = require('react')
var ReactDOM = require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link
var App = React.createClass({
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
</ul>
</div>
)
}
})
var About = require('./components/Home')
ReactDOM.render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>
), document.body)
我的家。jsx文件:
var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');
var Home = React.createClass({
render:function() {
return (
<RaisedButton label="Default" />
);
},
});
module.exports = Home;
就我而言，
//details.js
import React from 'react'
const Details = (props) =>{
return <h1>Details</h1>
}
export default Details;
//main.js
import React from "react";
import { withRouter } from "react-router";
import {Route,BrowserRouter as Router,Redirect,Switch,Link} from "react-router-dom";
import Details from "./myAccount/details";
const Main = (props) => {
return (
<>
<Switch>
<Route path="/my-account/details" component={<Details />} />
</Switch>
</>
);
};
export default withRouter(Main);
===========================
Replaced with below one, error got fixed
component={<Details />} with component={Details}
@Balasubramani M救了我。想再加一个来帮助人们。当你把太多的东西粘在一起，对版本漫不经心时，这就是问题所在。我更新了material-ui的一个版本，需要更改
import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card";
:
import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';
当我在同一目录中有一个.jsx和.scss文件且根名称相同时，我遇到了这个错误。
举个例子，如果你有Component。jsx和Component。SCSS在同一个文件夹中，你试着这样做:
import Component from ./Component
Webpack显然混淆了，至少在我的情况下，当我真正想要.jsx文件时，它试图导入scss文件。
我可以通过重命名.scss文件并避免歧义来修复它。我还可以显式地导入Component.jsx
