未捕获的错误：元素类型无效：应为字符串（对于内置组件）答案

【问题标题】：Uncaught Error: Element type is invalid: expected a string (for built-in components)未捕获的错误：元素类型无效：应为字符串（对于内置组件）
【发布时间】：2018-02-01 04:48:30
【问题描述】：

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

Webpacker 本身正在编译，没有错误或警告。

错误：未捕获的错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记从定义它的文件中导出您的组件。 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 = {};

错误

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)

【问题讨论】：

这可能与您的问题无关，但是否需要两次导出 AppComponent ？ PS：在您的 index.js 中，您导入 { App } from './components/CustomerSearch'; 但没有提及 AppComponent。
我是 reactjs 新手，我通过以下链接创建页面 tutorialspoint.com/reactjs/reactjs_events.htm 抱歉，我不确定我在哪里导出两次 AppComponent 但我的理解是我在 customersearch.js 中导出一次（ AppComponent.js)

标签： reactjs

【解决方案1】：

这个错误很可能是由于您的 import 语句引起的。首先，这很奇怪import { App } from './components/CustomerSearch';，因为我希望您有一个名为 CustomSearch.js 的文件，但从您的问题来看，它是 AppComponent.js，所以我建议您像这样更改它

import App from './components/AppComponent';

//这里名称App 无关紧要，只要您正在执行默认导出即可。

【讨论】：

@d.g import CustomerSearch from './components/CustomerSearch.js'; 不要用大括号括起来。
将此 export default class CustomerSearch 更改为 class CustomerSearch 并在组件末尾执行导出，如 export default CustomerSearch
@I did as well 仍然有一个错误警告：React.createElement: type is invalid -- 期望一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：不明确的。您可能忘记从定义组件的文件中导出组件。检查CustomerSearch 的渲染方法。在 CustomerSearch 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但未定义。您可能忘记从检查CustomerSearch 的渲染方法中定义的文件中导出组件。
现在我的 CustomerSearch.js 看起来像 import React from 'react'; import { Grid } from 'Adding my own package here';从'wolfy87-eventemitter'导入EventEmitter；类 CustomerSearch 扩展 React.Component { .... } CustomerSearch.defaultProps = {};导出默认 CustomerSearch；

【解决方案2】：

我将错误解释为您可能忘记导出您的Grid（或者您的App）组件。那是你检查过的东西吗？（在定义这些组件的两个文件中）。

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

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

【讨论】：