未捕获的错误:元素类型无效:应为字符串(对于内置组件)

IT技术 reactjs
2021-05-07 01:52:55
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'));

应用组件.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)
2个回答

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

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

对于仅使用导出的组件(或函数、常量等),export您只需使用 import {ComponentName} from .... 否则,如果它们是由 导出的export default,那么它们将在不带花括号 ( import ComponentName from ..) 的情况下导入

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

import App from './components/AppComponent';

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