Nicht abgefangene Fehler: Element-Typ ist ungültig: erwartet einen string (für die eingebauten Komponenten)

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

Webpacker selbst kompilieren keine Fehler oder Warnungen.

Fehler : nicht abgefangener Fehler: Element-Typ ist ungültig: erwartet einen string (für die eingebauten Komponenten) oder eine Klasse/Funktion (für composite-Bauteile), aber bekam: undefined. Sie wahrscheinlich vergessen, den export von Komponenten aus der Datei es definiert.
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 = {};

Fehler 

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)
  • Könnte es nicht sein, in Bezug auf Ihr problem, aber ist es notwendig, zu exportieren AppComponent zweimal ? PS : In index.js, die Sie importieren { App } from './components/CustomerSearch'; aber es gibt keine Erwähnung von AppComponent.
  • Ich bin neu für reactjs, ich habe Seite über folgenden link tutorialspoint.com/reactjs/reactjs_events.htm Sorry, ich bin nicht sicher, wo ich bin, exportieren doppelt AppComponent aber mein Verstand sagt, ich bin zu exportieren, sobald in customersearch.js(AppComponent.js)
InformationsquelleAutor d.g | 2017-08-23
  1. 2

    Bin ich der Interpretation des Fehlers als zu sagen, dass vielleicht Sie vergessen haben, exportieren Sie Ihre Grid (oder vielleicht Ihre App) Komponente. Ist das etwas, das Sie geprüft haben? (In den beiden Dateien, in denen die Komponenten definiert sind).

    Und als abdul sagte, es ist möglich, der import ist im falschen format. Es hängt davon ab, ob Sie exportiert haben, die Komponenten von export oder export default.

    Für Komponenten (oder-Funktionen, Konstanten, etc.), die exportiert werden, mit nur export Sie brauchen, um es zu importieren, die mit der syntax von import {ComponentName} from .... Sonst, wenn Sie exportiert werden, indem export default sind, dann sind Sie importiert, ohne die geschweiften Klammern (import ComponentName from ..).

    InformationsquelleAutor jonahe
  2. 1

    Dieser Fehler ist wahrscheinlich verursacht, weil Ihre import-Anweisung. Zuerst diese komische import { App } from './components/CustomerSearch'; weil hier das, was ich erwarte, ist, dass Sie eine Datei namens CustomSearch.js aber aus Ihrer Frage, es ist AppComponent.js also ich schlage vor, Sie ändern es so

    import App from './components/AppComponent';

    //hier wird der name App egal, solange man ein Standard-export-was du tust.

    • Vielen Dank für Ihre Antwort..
    • CustomerSearch von './components/CustomerSearch.js'; - Don ' T wickeln Sie es mit Klammern.
    • Ändern Sie diese export default class CustomerSearch zu class CustomerSearch und am Ende Ihrer Komponente zu tun, die export-wie export default CustomerSearch
    • habe da auch noch ein Fehler Warnung: Reagieren.createElement: Typ ungültig ist -- erwartet einen string (für die eingebauten Komponenten) oder eine Klasse/Funktion (für composite-Bauteile), aber bekam: undefined. Sie wahrscheinlich vergessen, den export von Komponenten aus der Datei es definiert. Überprüfen Sie die render-Methode von CustomerSearch. in CustomerSearch Fehler: Element-Typ ist ungültig: erwartet einen string (für die eingebauten Komponenten) oder eine Klasse/Funktion (für composite-Komponenten), bekam aber nicht definiert. Sie wahrscheinlich vergessen, den export von Komponenten aus der Datei definiert, in Überprüfen Sie die render-Methode von CustomerSearch.
    • nun meine CustomerSearch.js sieht aus wie importieren Reagieren von 'reagieren'; import { Grid } von 'Hinzufügen mein eigenes Paket hier'; import EventEmitter von 'wolfy87-eventemitter'; Klasse CustomerSearch erstreckt Reagieren.Komponente { .... } CustomerSearch.defaultProps = {}; export Standard CustomerSearch;
    • plz help wie kann ich loswerden dieser Fehler

    InformationsquelleAutor abdul
Schreibe einen Kommentar