未被捕获的错误：不变的违规：元素types是无效的：期望一个string（对于内置组件）或一个类/函数，但得到：对象
我得到这个错误：
未捕获的错误：不变的违规：元素types无效：期望一个string（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。
这是我的代码：
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) 我的Home.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;
在我的情况下（ 使用Webpack ）是这样的区别：
import {MyComponent} from '../components/xyz.js';
VS
import MyComponent from '../components/xyz.js';
第二个工作，而第一个造成的错误。
您需要导出默认或需要（path）.default
var About = require('./components/Home').default
你刚才模块化了你的任何React组件吗？ 如果是的话，你会得到这个错误，如果你忘了指定module.exports ，例如：
非模块化的先前有效的组件/代码：
var YourReactComponent = React.createClass({ render: function() { ...
模块化组件/ code与module.exports ：
module.exports = React.createClass({ render: function() { ...
https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router也是react-router的属性之一。 所以改变你的模块需要这样的代码：
var reactRouter = require('react-router') var Router = reactRouter.Router var Route = reactRouter.Route var Link = reactRouter.Link
如果你想使用ES6语法链接使用（ import ），使用babel作为助手。
顺便说一句，为了使你的代码有效，我们可以在App添加{this.props.children}
render() { return ( <div> <h1>App</h1> <ul> <li><Link to="/about">About</Link></li> </ul> {this.props.children} </div> ) }
如果您遇到此错误，可能是因为您正在使用导入链接
import { Link } from 'react-router'
相反，它可能会更好使用
import { Link } from 'react-router-dom'
我相信这是反应路由器版本4的一个要求
就我而言，这是由错误的评论符号造成的。 这是错误的：
<Tag> /*{ oldComponent }*/ { newComponent } </Tag>
这是对的：
<Tag> {/*{ oldComponent }*/} { newComponent } </Tag>
注意大括号
我通过import App from './app/';执行import App from './app/';获得这个import App from './app/'; 期待它导入./app/index.js ，但它导入./app.json 。
另一个可能的解决scheme，为我工作：
目前， react-router-redux处于testing阶段，npm返回4.x，但不是5.x. 但@types/react-router-redux返回5.x. 所以有未定义的variables使用。
迫使NPM /纱线使用5.x解决了我。
在我的情况下，导出的子模块之一没有返回一个适当的反应组件。
const Component = <div> Content </div>; 而不是const Component = () => <div>Content</div>;
显示的错误是为父，因此无法弄清楚。
我遇到了同样的问题，并意识到我在JSX标记中提供了一个未定义的 React组件。 事情是，反应组件呈现dynamic计算，并最终被定义为！
错误陈述：
不变的违规：元素types是无效的：期望一个string（对于内置组件）或一个类/函数（对于复合组件），但得到：undefined。 您可能忘记从定义的文件中导出组件。检查
C的渲染方法，
产生这个错误的例子：
var componentA = require('./components/A'); var componentB = require('./components/B'); const templates = { a_type: componentA, b_type: componentB } class C extends React.Component { constructor(props) { super(props); } // ... render() { //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C) const ComponentTemplate = templates[this.props.data.uiType]; return <ComponentTemplate></ComponentTemplate> } // ... }
就像一个快速添加到这一点。 我有同样的问题，而Webpack正在编译我的testing和应用程序运行良好。 当我将组件导入到testing文件中时，我在其中一个导入上使用了不正确的情况，导致了相同的错误。
import myComponent from '../../src/components/myComponent'
本来应该
import myComponent from '../../src/components/MyComponent'
请注意，导入名称myComponent取决于MyComponent文件中的导出名称。
就我而言，由于图书馆的缘故，导入过程是隐含的。
我设法修改它
export class Foo
至
export default class Foo 。
import Rating from 'src/components/Rating';
VS
import Rating from 'src/components/Rating.js';
第二个为我工作。
我遇到了这个错误，当我有一个.jsx和.scss文件在相同的目录中具有相同的根名称。
所以，例如，如果您在同一个文件夹中有Component.jsx和Component.scss ，并且您尝试这样做：
import Component from ./Component
Webpack显然会感到困惑，至less在我的情况下，当我真的想要.jsx文件时，试图导入scss文件。
我能够通过重命名.scss文件并避免含糊不清来修复它。 我也可以显式导入Component.jsx
对我来说，我的风格元件是在我的function元件定义之后定义的。 这只是在舞台上发生，而不是在我本地。 一旦我将我的样式组件移动到组件定义之上，错误就消失了。
