Nicht erfasster Fehler: Invariante Verletzung: Elementtyp ist ungültig: Erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion, hat jedoch: Objekt

Ich erhalte diesen Fehler:

Nicht erfasster Fehler: Invariante Verletzung: Elementtyp ist ungültig: Erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für zusammengesetzte Komponenten), hat jedoch: Objekt.

Das ist mein Code:

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)

Meine Home.jsxDatei:

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;

In meinem Fall ( mit Webpack ) war es der Unterschied zwischen:

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

vs.

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

Der zweite funktioniert, während der erste den Fehler verursacht. Oder das Gegenteil.

Sie benötigen Standard exportieren oder benötigen (Pfad) .default

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

Haben Sie gerade eine Ihrer React-Komponenten modularisiert? Wenn ja, wird dieser Fehler angezeigt , wenn Sie vergessen haben, module.exports anzugeben , zum Beispiel:

nicht modularisierte zuvor gültige Komponente / Code:

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

modularisierte Komponente / Code mit module.exports :

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

Wenn Sie diesen Fehler erhalten, liegt dies möglicherweise daran, dass Sie den Link mit importieren

import { Link } from 'react-router'

Stattdessen ist es möglicherweise besser zu verwenden

{Link} aus ' react-router-dom ' importieren '
                      ^ -------------- ^

Ich glaube, dies ist eine Voraussetzung für den React Router Version 4

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router ist auch eine der Eigenschaften von react-router. Ändern Sie also, dass Ihre Module folgenden Code erfordern:

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

Wenn Sie die ES6-Syntax für den Link use ( import) verwenden möchten , verwenden Sie babel als Helfer.

BTW, um Ihren Code Werk zu machen, können wir hinzufügen , {this.props.children}in der App, wie

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

  )
}

Lassen Sie sich nicht von der Liste der Antworten auf eine einzelne Frage überraschen. Es gibt verschiedene Ursachen für dieses Problem.

Für meinen Fall war die Warnung

warning.js: 33 Warnung: React.createElement: Typ ist ungültig - erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für zusammengesetzte Komponenten), hat jedoch: undefiniert. Sie haben wahrscheinlich vergessen, Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist. Überprüfen Sie Ihren Code unter index.js: 13.

Gefolgt von dem Fehler

invariant.js: 42 Nicht erfasster Fehler: Elementtyp ist ungültig: Es wurde eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für zusammengesetzte Komponenten) erwartet, aber: undefiniert. Sie haben wahrscheinlich vergessen, Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist.

Ich konnte den Fehler nicht verstehen, da er keine Methode oder keinen Dateinamen erwähnt. Ich konnte erst nach dem Betrachten dieser oben erwähnten Warnung eine Lösung finden.

Ich habe die folgende Zeile bei index.js.

<ConnectedRouter history={history}>

Als ich mit dem Schlüsselwort "ConnectedRouter" nach dem obigen Fehler gegoogelt habe, habe ich die Lösung auf einer GitHub-Seite gefunden.

Der Fehler liegt darin, dass wir bei der Installation des react-router-reduxPakets dieses standardmäßig installieren. https://github.com/reactjs/react-router-redux, aber nicht die eigentliche Bibliothek.

Um diesen Fehler zu beheben, installieren Sie das richtige Paket, indem Sie den npm-Bereich mit angeben @

npm install react-router-redux@next

Sie müssen das falsch installierte Paket nicht entfernen. Es wird automatisch überschrieben.

Vielen Dank.

PS: Auch Warnung hilft dir. Vernachlässigen Sie nicht die Warnung , wenn Sie nur den Fehler betrachten .

In meinem Fall hat eines der exportierten untergeordneten Module keine ordnungsgemäße Reaktionskomponente zurückgegeben.

const Component = <div> Content </div>;

anstatt

const Component = () => <div>Content</div>;

Der angezeigte Fehler betraf den Elternteil und konnte daher nicht herausgefunden werden.

In meinem Fall wurde dies durch falsche Kommentarsymbole verursacht. Das ist falsch:

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

Das ist richtig:

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

Beachten Sie die geschweiften Klammern

Ich habe den gleichen Fehler: ERROR FIX !!!!

Ich benutze 'React-Router-Redux' v4, aber sie ist schlecht. Nach npm installiere React-Router-Redux @ Als nächstes bin ich auf "React-Router-Redux": "^ 5.0.0-alpha.9",

UND ES ARBEITET

Ich habe dies erreicht, indem ich import App from './app/';erwartet habe, dass es importiert wird ./app/index.js, aber es wurde stattdessen importiert ./app.json.

Ich hatte das gleiche Problem und stellte fest, dass ich eine Undefined React-Komponente im JSX-Markup bereitstellte . Die Sache ist, dass die zu rendernde Reaktionskomponente dynamisch berechnet wurde und undefiniert wurde!

Der Fehler lautete:

Invariante Verletzung: Elementtyp ist ungültig: Erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für zusammengesetzte Komponenten), hat jedoch: undefiniert. Sie haben wahrscheinlich vergessen, Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist. Überprüfen Sie die Rendermethode von C.,.

Das Beispiel, das diesen Fehler erzeugt:

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>
  }
  
  // ...
}

Das Problem war, dass ein ungültiger "uiType" bereitgestellt wurde und daher als Ergebnis undefiniert wurde:

templates['InvalidString']

Nur als schnelle Ergänzung dazu. Ich hatte das gleiche Problem und während Webpack meine Tests kompilierte und die Anwendung einwandfrei lief. Beim Importieren meiner Komponente in die Testdatei habe ich bei einem der Importe den falschen Fall verwendet, und dies hat denselben Fehler verursacht.

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

Gewesen sein sollte

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

Beachten Sie, dass der Importname myComponentvom Namen des Exports in der MyComponentDatei abhängt .

Hatte ein ähnliches Problem mit den neuesten React Native-Versionen 0.50 und höher.

Für mich war es ein Unterschied zwischen:

import App from './app'

und

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

(Letzteres hat das Problem behoben). Ich habe Stunden gebraucht, um diese seltsame, schwer zu bemerkende Nuance zu fangen :(

Eine andere mögliche Lösung, die für mich funktioniert hat:

Derzeit react-router-reduxist in der Beta und npm gibt 4.x zurück, aber nicht 5.x. Aber die @types/react-router-reduxzurückgegebenen 5.x. Es wurden also undefinierte Variablen verwendet.

Das Erzwingen der Verwendung von 5.x durch NPM / Garn hat es für mich gelöst.

Angesichts Ihres Fehlers von:

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

Sie haben 2 Möglichkeiten:

1. Ihre Exportdatei kann das Wort defaultwie in haben. export default class ____.... Dann muss Ihr Import die Verwendung vermeiden {}. Wie inimport ____ from ____

2. Vermeiden Sie die Verwendung des Standardworts. Dann sieht Ihr Export so aus. export class ____... Dann muss Ihr Import das verwenden {}. Mögenimport {____} from ____

In meinem Fall erfolgte der Import implizit aufgrund einer Bibliothek.

Ich habe es geschafft, es durch Ändern zu beheben

export class Foo

zu

export default class Foo.

Ich bin auf diesen Fehler gestoßen, als ich eine .jsx- und eine .scss-Datei im selben Verzeichnis mit demselben Stammnamen hatte.

So zum Beispiel, wenn Sie haben Component.jsxund Component.scssdie gleichen Ordner und Sie versuchen , dies zu tun:

import Component from ./Component

Webpack ist anscheinend verwirrt und versucht zumindest in meinem Fall, die scss-Datei zu importieren, wenn ich die .jsx-Datei wirklich möchte.

Ich konnte das Problem beheben, indem ich die .scss-Datei umbenannte und die Mehrdeutigkeit vermeidete. Ich hätte auch Component.jsx explizit importieren können

Und in meinem Fall fehlte mir nur ein Semikolon bei der Import-Dekleration in einem meiner Submodule.

Es wurde behoben, indem Folgendes geändert wurde:

import Splash from './Splash'

dazu:

import Splash from './Splash';

In meinem Fall habe ich den Standardexport verwendet, aber kein functionoder exportiert React.Component, sondern nur ein JSXElement, dh

Error:

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

Werke:

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

Zusätzlich zu import/ exportgenannten Problemen. Ich habe festgestellt, dass React.cloneElement()das Hinzufügen propszu einem untergeordneten Element und das anschließende Rendern denselben Fehler verursacht hat.

Ich musste mich ändern:

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

zu:

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

Weitere Informationen finden Sie in den React.cloneElement() Dokumenten .

Ich habe diesen Fehler beim Reaktionsrouting erhalten. Das Problem war, dass ich ihn verwendet habe

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

Aber es war eine falsche Route, die eine Komponente als Klasse / Funktion erfordert, also habe ich sie geändert

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

und es hat funktioniert. (Vermeiden Sie einfach die Klammern um das Bauteil)

Für mich war es so, dass meine gestalteten Komponenten nach meiner Definition der funktionalen Komponenten definiert wurden. Es geschah nur in der Inszenierung und nicht lokal für mich. Sobald ich meine gestalteten Komponenten über meine Komponentendefinition verschoben habe, ist der Fehler behoben.

Dies bedeutet, dass einige Ihrer importierten Komponenten falsch deklariert oder nicht vorhanden sind

Ich hatte ein ähnliches Problem

import { Image } from './Shared'

Aber als ich in die freigegebene Datei schaute, hatte ich keine 'Image'-Komponente, sondern eine' ItemImage'-Komponente

import { ItemImage } from './Shared';

Dies passiert, wenn Sie Code aus anderen Projekten kopieren;)

Ich hatte ein Problem mit React.Fragment, weil die Version meiner Reaktion war < 16.2, also habe ich es losgeworden.

@ Balasubramani M hat mich hier gerettet. Wollte noch einen hinzufügen, um Menschen zu helfen. Dies ist das Problem, wenn Sie zu viele Dinge zusammenkleben und mit Versionen unbekümmert sind. Ich habe eine Version von material-ui aktualisiert und muss sie ändern

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

dazu:

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

Ich hatte das gleiche Problem und das Problem war, dass einige JS-Dateien nicht in der Bündelung dieser bestimmten Seite enthalten waren. Versuchen Sie, diese Datei einzuschließen, und das Problem wurde möglicherweise behoben. Ich war das:

.Include("~/js/" + jsFolder + "/yourjsfile")

und es hat das Problem für mich behoben.

Dies war, während ich React in Dot NEt MVC verwendete

Ich habe einen anderen Grund für diesen Fehler entdeckt. Dies hat damit zu tun, dass CSS-in-JS einen Nullwert an das JSX der obersten Ebene der Rückgabefunktion in einer React-Komponente zurückgibt.

Zum Beispiel:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Ich würde diese Warnung bekommen:

Warnung: React.createElement: Typ ist ungültig - erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für zusammengesetzte Komponenten), hat aber: null.

Gefolgt von diesem Fehler:

Nicht erfasster Fehler: Elementtyp ist ungültig: Es wurde eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für zusammengesetzte Komponenten) erwartet, aber: null.

Ich habe festgestellt, dass es kein CSS mit der CSS-in-JS-Komponente gibt, die ich rendern wollte. Ich habe das Problem behoben, indem ich sichergestellt habe, dass CSS zurückgegeben wird und kein Nullwert.

Zum Beispiel:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Ich erhalte fast den gleichen Fehler:

Nicht erfasst (im Versprechen) Fehler: Elementtyp ist ungültig: Erwartet eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse / Funktion (für zusammengesetzte Komponenten), hat jedoch: Objekt.

Ich habe versucht, eine reine Funktionskomponente aus einer anderen Knotenbibliothek zu importieren, die mein Team entwickelt hat. Um dies zu beheben, musste ich von zu einem absoluten Import (unter Bezugnahme auf den Pfad zur Komponente im Inneren node_modules) von wechseln

importiere FooBarList von 'team-ui';

zu

FooBarList aus 'team-ui / lib / components / foo-bar-list / FooBarList' importieren;

In meinem Fall war es die äußere Komponente, die wie folgt importiert wurde:

import React, { Component } from 'react';

und dann erklärt wie:

export default class MyOuterComponent extends Component {

Wo eine innere Komponente das React Bare importierte:

import React from 'react';

und zur Erklärung darin gepunktet:

export default class MyInnerComponent extends ReactComponent {

In meinem Fall habe ich einige Zeit gebraucht, um mögliche Wege zu suchen und zu überprüfen, aber nur auf diese Weise behoben: Entfernen Sie "{", "}" beim Importieren einer benutzerdefinierten Komponente:

import OrderDetail from './orderDetail';

Mein falscher Weg war:

import { OrderDetail } from './orderDetail';

Weil ich in der Datei orderDetail.js OrderDetail als Standardklasse exportiert habe:

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;