未捕获的错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或类/函数但得到:对象

Question

我收到此错误:

未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到: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)

我的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;

Answer 1

在我的情况下(使用Webpack),区别在于:

import {MyComponent} from '../components/xyz.js';

VS

import MyComponent from '../components/xyz.js';

第二个工作,而第一个导致错误.

Answer 2

您需要导出默认值或require(路径).default

var About = require('./components/Home').default

Answer 3

你刚刚模块化了你的任何React组件吗？如果是,如果您忘记指定module.exports,则会出现此错误,例如:

非模块化的先前有效的组件/代码:

var YourReactComponent = React.createClass({
    render: function() { ...

模块化的组件/代码与module.exports:

module.exports = React.createClass({
    render: function() { ...

Answer 4

如果您收到此错误,可能是因为您正在使用导入链接

import { Link } from 'react-router'

相反,它可能更好用

import { Link } from 'react-router-dom'
                      ^--------------^

我相信这是反应路由器版本4的要求

Answer 5

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语法链接use(import),请使用babel作为帮助.

BTW,使你的代码的作品,我们可以添加{this.props.children}的App,如

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

Answer 6

不要对单个问题的答案列表感到惊讶.这个问题有多种原因;

对于我的情况,警告是

warning.js:33警告:React.createElement:type无效 - 期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件.请在index.js中检查您的代码:13.

其次是错误

invariant.js:42 Uncaught Error:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:undefined.您可能忘记从其定义的文件中导出组件.

我无法理解错误,因为它没有提到任何方法或文件名.只有在看到上面提到的这个警告后我才能解决.

我在index.js上有以下行.

<ConnectedRouter history={history}>

当我使用关键字"ConnectedRouter"搜索上述错误时,我在GitHub页面中找到了解决方案.

该错误是因为,当我们安装react-router-redux包时,默认情况下我们安装这个包. https://github.com/reactjs/react-router-redux但不是实际的库.

要解决此错误,请通过指定npm范围来安装正确的包 @

npm install react-router-redux@next

您无需删除错误安装的软件包.它会被自动覆盖.

谢谢.

PS:甚至警告都会帮助你.不要仅仅因为看错误而忽略警告.

Answer 7

鉴于您的错误：

'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'

您有 2 个选择：

1. 导出文件可以有字default，如

export default class someNameHere

然后您的导入将需要避免{}在它周围使用。如

import somethingHere from someWhereHere

2. 避免使用默认词。然后你的出口看起来像

export class someNameHere

那么您的导入必须使用{}. 喜欢

import {somethingHere} from someWhereHere

Answer 8

在我的例子中,导出的子模块之一没有返回适当的反应组件.

__CODE__ 代替 __CODE__

显示的错误是针对父母的,因此无法弄清楚.

Answer 9

就我而言,这是由错误的评论符号引起的.这是错的:

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

这是对的:

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

注意大括号

Answer 10

我有同样的错误: ERROR FIX !!!!

我使用'react-router-redux'v4,但她很糟糕.在npm安装react-router-redux @之后, 我正在使用 "react-router-redux":"^ 5.0.0-alpha.9",

而且它的工作

Answer 11

我通过import App from './app/';期望它导入来获得这个./app/index.js,但它改为导入./app.json.

Answer 12

我遇到了同样的问题，并意识到我在JSX标记中提供了一个Undefined React组件。事实是，要渲染的react组件是动态计算的，并且最终未定义！

错误指出：

不变违规：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件。检查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>
  }
  
  // ...
}

问题是提供了无效的“ uiType”，因此这导致产生未定义的结果：

templates['InvalidString']

Answer 13

与React Native最新版本0.50及更高版本有类似问题.

对我来说,这是一个区别:

import App from './app'

和

import App from './app/index.js'

(后者解决了这个问题).花了我几个小时来抓住这个奇怪的,很难注意到细微差别:(

Answer 14

就我而言，导入是由于库而隐式发生的。

我设法通过改变来修复它

export class Foo

到

export default class Foo.

Answer 15

就像对此的快速补充。我遇到了同样的问题，而Webpack正在编译测试，并且应用程序运行良好。当我将组件导入测试文件时，我在其中一个导入中使用了不正确的大小写，这会导致相同的错误。

import myComponent from '../../src/components/myComponent'

本来应该

import myComponent from '../../src/components/MyComponent'

请注意，导入名称myComponent取决于MyComponent文件内导出的名称。

Answer 16

另一个可能的解决方案，对我有用：

当前，react-router-redux处于beta中，npm返回4.x，但不返回5.x。但是@types/react-router-redux返回了5.x。因此，使用了未定义的变量。

强制NPM / Yarn使用5.x为我解决了该问题。

Answer 17

当我在同一目录中有一个具有相同根名称的 .jsx 和 .scss 文件时，我遇到了这个错误。

因此，例如，如果您在同一个文件夹中拥有Component.jsx和Component.scss并且您尝试执行以下操作：

import Component from ./Component

Webpack 显然感到困惑，至少在我的情况下，当我真的想要 .jsx 文件时，它会尝试导入 scss 文件。

我能够通过重命名 .scss 文件并避免歧义来修复它。我也可以显式导入 Component.jsx

Answer 18

就我而言，我使用的是默认导出，但不导出 afunction或React.Component，而只是一个JSX元素，即

错误：

export default (<div>Hello World!</div>)

作品：

export default () => (<div>Hello World!</div>)

Answer 19

我在反应路由中遇到此错误，问题是我正在使用

<Route path="/" component={<Home/>} exact />

但错误的路线需要组件作为类/函数，所以我将其更改为

<Route path="/" component={Home} exact />

它起作用了。（只要避免组件周围的大括号即可）