未捕获的错误:元素类型无效:应为字符串(对于内置组件) [英] Uncaught Error: Element type is invalid: expected a string (for built-in components)

问题描述

我收到这个错误.我已经在 index.js 中定义了所有组件，并且我正在使用 react-dom.

Webpacker 本身在编译时没有错误或警告.

错误:未捕获的错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件.index.js

import 'core-js/fn/object/assign';import React, { Component } from 'react';从 'react-dom' 导入 ReactDOM；从'./components/CustomerSearch'导入{应用}；//将主组件渲染到dom中ReactDOM.render(, document.getElementById('app'));

AppComponent.js

import React, { Component } from 'react';从在此处添加我自己的包"导入 {Grid}；从'wolfy87-eventemitter'导入EventEmitter；导出默认类 AppComponent 扩展 React.Component {发射器 = 空；构造函数(){极好的();this.emitter = new EventEmitter();this.emitter.addListener('result', function (args) {})}使成为() {返回 (<div className="搜索"><网格><Grid.Column width={4}><SearchForm updatechForm Emitter={this.emitter}/></Grid.Column><Grid.Column width={12}><ResultList发射器={this.emitter}/></Grid.Column></网格>

);}}AppComponent.defaultProps = {};

错误

warning.js:35 警告:React.createElement:类型无效——需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件.打印警告@warning.js:35警告@warning.js:59createElement @ ReactElementValidator.js:192(匿名)@ index.js:7__webpack_require__@bootstrap 35891eb36bf51eb82cc9:19module.exports @ bootstrap 35891eb36bf51eb82cc9:62(匿名)@bootstrap 35891eb36bf51eb82cc9:62invariant.js:44 未捕获的错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件.在不变 (invariant.js:44)在 ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:74)在 ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:366)在 ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)在 Object.mountComponent (ReactReconciler.js:45)在 mountComponentIntoNode (ReactMount.js:104)在 ReactReconcileTransaction.perform (Transaction.js:143)在 batchedMountComponentIntoNode (ReactMount.js:126)在 ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)在 Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)

解决方案

我将错误解释为可能您忘记导出您的 Grid(或者您的 App代码>) 组件.那是你检查过的吗?(在定义这些组件的两个文件中).

正如 abdul 所说，导入的格式可能有误.这取决于您是通过export 还是export default 导出组件.

对于仅使用 export 导出的组件(或函数、常量等)，您需要使用 import {ComponentName} from ... 的语法导入它.否则，如果它们是通过 export default 导出的，则导入时不带花括号 (import ComponentName from ..).

I am getting this error. I have defined all components in index.js and I am using react-dom.

Webpacker itself is compiling with no errors or warnings.

error : Uncaught 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. index.js

import 'core-js/fn/object/assign';
import React, { Component }  from 'react';
import ReactDOM from 'react-dom';
import { App } from './components/CustomerSearch';


// Render the main component into the dom
ReactDOM.render(<App />, document.getElementById('app'));

AppComponent.js

import React, { Component }  from 'react';
import {Grid} from 'Adding my own package here';
import EventEmitter from 'wolfy87-eventemitter';


export default class AppComponent extends React.Component {

  emitter = null;

  constructor() {
    super();

    this.emitter = new EventEmitter();

    this.emitter.addListener('result', function (args) {
    })

  }

  render() {
    return (
      <div className="Search">
        <Grid>
          <Grid.Column width={4}>
            <SearchForm updatechForm emitter={this.emitter}/>
          </Grid.Column>
          <Grid.Column width={12}>
            <ResultList emitter={this.emitter}/>
          </Grid.Column>
        </Grid>
      </div>
    );
  }
}

AppComponent.defaultProps = {};

error

warning.js:35 Warning: React.createElement: 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.
printWarning @ warning.js:35
warning @ warning.js:59
createElement @ ReactElementValidator.js:192
(anonymous) @ index.js:7
__webpack_require__ @ bootstrap 35891eb36bf51eb82cc9:19
module.exports @ bootstrap 35891eb36bf51eb82cc9:62
(anonymous) @ bootstrap 35891eb36bf51eb82cc9:62
invariant.js:44 Uncaught 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.
    at invariant (invariant.js:44)
    at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (instantiateReactComponent.js:74)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:366)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:257)
    at Object.mountComponent (ReactReconciler.js:45)
    at mountComponentIntoNode (ReactMount.js:104)
    at ReactReconcileTransaction.perform (Transaction.js:143)
    at batchedMountComponentIntoNode (ReactMount.js:126)
    at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
    at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)

解决方案

I'm interpreting the error as saying that maybe you forgot to export your Grid (or maybe your App) component. Is that something you have checked? (In the two files where those components are defined).

And as abdul said, it's possible the import is in the wrong format. It depends on whether you have exported the components by export or export default.

For components (or functions, constants etc) that are exported using just export you need to import it with the syntax of import {ComponentName} from .... Else, if they are exported by export default, then they are imported without the curly braces (import ComponentName from ..).

这篇关于未捕获的错误:元素类型无效:应为字符串(对于内置组件)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！