wake-up-neo.com

Nicht abgefangener Fehler: Invariante Verletzung: Der Elementtyp ist ungültig: Es wurde eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion erwartet, aber ein: Objekt

Ich erhalte diesen Fehler: 

Nicht gefundener Fehler: Invariante Verletzung: Der Elementtyp ist ungültig: erwartet eine Zeichenfolge (für eingebaute Komponenten) oder eine Klasse/Funktion (für Verbundkomponenten ), aber got: object.

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.jsx -Datei:

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;
406
Pankaj Thakur

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

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

vs

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

Der zweite arbeitet, während der erste den Fehler verursacht hat.

732
JohnL

sie benötigen einen Export-Standardwert oder benötigen (Pfad) 

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

Haben Sie gerade eine Ihrer React-Komponenten modularisiert? Wenn ja, erhalten Sie diese Fehlermeldung, wenn Sie vergessen haben, module.exports anzugeben, beispielsweise:

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() { ...
51
charlez

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4Router ist auch eine der Eigenschaften von react-router. Ändern Sie also Ihre Module mit folgendem Code:

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

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

BTW, damit Ihr Code funktioniert, können Sie {this.props.children} in App, Hinzufügen

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

  )
}
16
David Guan

Wenn Sie diesen Fehler erhalten, kann dies daran liegen, dass Sie den Link mithilfe von importieren 

import { Link } from 'react-router'

stattdessen ist es vielleicht besser zu verwenden 

 import {Link} von 'reagier-Router-Dom'
 ^ -------------- ^ 

Ich glaube, dies ist eine Voraussetzung für die Reaktorrouterversion 4

15
NSCoder

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: type ist ungültig. Es wurde eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten) erwartet, es wurde jedoch Folgendes angegeben: undefined. 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 gefundener Fehler: Elementtyp ist ungültig: Es wurde eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten) erwartet, aber Folgendes wurde erhalten: undefined. 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 Methoden oder Dateinamen erwähnt. Ich konnte das Problem erst lösen, nachdem ich mir diese Warnung angesehen hatte.

Ich habe die folgende Zeile bei index.js.

<ConnectedRouter history={history}>

Als ich nach dem obigen Fehler mit dem Schlüsselwort "ConnectedRouter" googelte, fand ich die Lösung in einer GitHub-Seite.

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

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

npm install [email protected]

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

Vielen Dank.

PS: Sogar Warnung hilft Ihnen. Vernachlässigen Sie warning nicht, indem Sie nur error betrachten.

12
Balasubramani M

In meinem Fall hat eines der exportierten Kindermodule keine richtige Reaktionskomponente zurückgegeben. 

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

Der angezeigte Fehler war für die Muttergesellschaft und konnte daher nicht ermittelt werden.

9
Katti

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

Ich benutze 'Reakt-Router-redux' v4, aber sie ist schlecht .. Nach npm installiere Reakt-Router-Redux @ next Ich bin auf "Reakt-Router- redux ":" ^ 5.0.0-alpha.9 ",

UND ES IST ARBEIT

7
Thibault Jp

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

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

Das ist richtig:

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

Beachten Sie die geschweiften Klammern

7
tuanh118

Hatte ein ähnliches Problem mit React Native neuesten Versionen ab 0.50.

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, kaum merkliche Nuance zu fangen:

6
Oleg

Ich bekam dies, indem ich import App from './app/'; erwarte, indem ich erwarte, dass ./app/index.js importiert wird, aber stattdessen ./app.json importiert wurde.

5
tybro0103

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

Der Fehler erklärte:

Invariante Verletzung: Der Elementtyp ist ungültig: Es wurde eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten) erwartet. Sie haben wahrscheinlich vergessen, Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist. Überprüfen Sie die Render-Methode 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 ausgegeben wurde:

templates['InvalidString']

4
Christian Adam

Nur eine schnelle Ergänzung dazu. Ich hatte das gleiche Problem und während Webpack meine Tests kompilierte und die Anwendung gut lief. Als ich meine Komponente in die Testdatei importierte, verwendete ich den falschen Fall für einen der Importe und der gleiche Fehler wurde verursacht.

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

Gewesen sein sollte

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

Beachten Sie, dass der Importname myComponent vom Namen des Exports in der MyComponent-Datei abhängt.

4
Blackout1985

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

Derzeit befindet sich react-router-redux in der Betaversion und npm gibt 4.x zurück, aber nicht 5.x. Der @types/react-router-redux lieferte jedoch 5.x. Es wurden also undefinierte Variablen verwendet.

NPM/Yarn für die Verwendung von 5.x zu zwingen, löste es für mich.

3
Florian Richter

In meinem Fall erfolgte der Import implizit aufgrund einer Bibliothek. 

Ich habe es geschafft, es durch einen Wechsel zu beheben

export class Foo

zu

export default class Foo.

2
thedayturns

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

Es wurde behoben, indem Folgendes geändert wurde:

import Splash from './Splash'

zu diesem:

import Splash from './Splash';
2
Rikard Askelöf

In meinem Fall verwendete ich den Standardexport, exportierte jedoch keine function oder React.Component, sondern nur ein JSX-Element, d.

Error:

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

Werke:

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

import Rating from 'src/components/Rating';

vs

import Rating from 'src/components/Rating.js';

der zweite arbeitete für mich.

1
Bat

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

Wenn Sie beispielsweise Component.jsx und Component.scss im selben Ordner haben und versuchen, dies zu tun:

import Component from ./Component

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

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

1
bergie3000

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

Ich hatte ein ähnliches Problem

import { Image } from './Shared'

aber als ich in die Shared-Datei sah, hatte ich keine 'Image'-Komponente, sondern eine' ItemImage'-Komponente

import { ItemImage } from './Shared';

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

0
webmaster

In meinem Fall waren es die Meta-Tags.

Ich habe benutzt

const MetaTags = require('react-meta-tags');

Ich denke, MetaTags ist ein Standardexport. Es hat Stunden gedauert, bis ich herausgefunden habe, welcher Export den Fehler verursacht hat.

const { MetaTags } = require('react-meta-tags');

Ich habe diesen Fehler beim Reagieren des Routings festgestellt. Das Problem war, dass ich verwendet habe

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

aber es war falsch Route erfordert Komponente als Klasse/Funktion, so dass ich es geändert habe

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

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

0

Ich habe einen anderen Grund für diesen Fehler entdeckt. Es hat damit zu tun, dass CSS-in-JS einen Nullwert an den 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: type ist ungültig - Es wird eine Zeichenfolge (für integrierte Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten) erwartet, es wurde jedoch Folgendes angegeben: null.

Gefolgt von diesem Fehler:

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

Ich entdeckte es, weil es kein CSS mit der Komponente CSS-in-JS gab, das ich rendern wollte. Ich habe es behoben, indem ich sicher war, dass CSS zurückgegeben wurde 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>
  );
}
0
alucinare

das Exportieren am Ende der Datei könnte das Problem lösen.

kosten Indicator Cloak = (Requisiten) => {...} Standard exportieren Indicator Cloak;

0
Noimang

Ich bekomme fast den gleichen Fehler:

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

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

importiere FooBarList von 'team-ui';

zu

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

0
Patrick

In meinem Fall hat es eine Menge Zeit gedauert, herauszufinden und nach Möglichkeiten zu suchen, aber nur so behoben: Entfernen Sie "{", "}" beim Importieren einer benutzerdefinierten Komponente:

import OrderDetail from './orderDetail';

Mein falscher Weg war:

import { OrderDetail } from './orderDetail';

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

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

export default OrderDetail;
0
tiennsloit

Ich hatte das gleiche Problem und das Problem war, dass einige Js-Dateien nicht in der Bündelung dieser spezifischen Seite enthalten waren. Versuchen Sie, diese Datei einzuschließen, und das Problem könnte behoben werden. Ich tat dies:

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

und es hat das Problem für mich behoben.

Dies war, als ich React in Dot NEt MVC verwendete

0
Jason

Ich habe diesen Fehler erhalten, als ich alle Libs auf die neueste Version aktualisiert habe

in der älteren Version sind Importe

import { TabViewAnimated, TabViewPagerPan } from 'react-native-tab-view';

in der neuen Version werden sie jedoch durch Folgendes ersetzt

import { TabView, PagerPan } from "react-native-tab-view";

Vergewissern Sie sich, dass alle Ihre Importe verfügbar sind, indem Sie mit der Maus klicken

0
Rajesh Nasit

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

0
Eugene

Dies wurde mir bei der Einführung von TypeScript in meine JavaScript-Anwendung mitgeteilt. Daher musste ich beim Importieren einer TSX-Datei in einer js-Datei .tsx im Import angeben.

von import ComponentName from "../component-name";

zu import ComponentName from "../component-name.tsx";

0
kentrh

Das Problem kann auch ein Alias ​​sein, der für einen Standardexport verwendet wird.

Veränderung

import { Button as ButtonTest } from "../theme/components/Button";

zu

import { default as ButtonTest } from "../theme/components/Button";

löste das Problem für mich.

0
Simon

@Balasubramani M hat mich hier gerettet. Wollte noch eins hinzufügen, um den Leuten 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 geändert werden

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

zu diesem:

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';
0
Kyle Pennell

In meinem Fall wurde die äußere Komponente folgendermaßen importiert:

import React, { Component } from 'react';

und dann erklärt wie:

export default class MyOuterComponent extends Component {

wo eine innere Komponente das Reagieren bloß importierte:

import React from 'react';

und gepunktet zur Erklärung:

export default class MyInnerComponent extends ReactComponent {

0
krayzk

Ich hatte das gleiche Problem, weil ich eine falsche Bibliothek importiert habe, also habe ich die Dokumentation aus der Bibliothek überprüft und die Route wurde mit der neuen Version geändert. Die Lösung war:

import {Ionicons} from '@expo/vector-icons';

und ich habe falsch geschrieben:

import {Ionicons} from 'expo';
0
hackemate ninja

Für mich war es so, dass meine Stilkomponenten nach meiner funktionalen Komponentendefinition definiert wurden. Es geschah nur in der Inszenierung und nicht lokal für mich. Nachdem ich meine Stilkomponenten über die Komponentendefinition verschoben hatte, war der Fehler nicht mehr vorhanden.

0
Jadam

Zusätzlich zu import/export genannten Problemen. Ich habe festgestellt, dass React.cloneElement() verwendet wurde, um props einem untergeordneten Element hinzuzufügen, und dann gerendert wurde, gab es denselben Fehler.

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 unter React.cloneElement()docs .

0
Greg K

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 die Word default wie in export default class ____.... enthalten. In diesem Fall muss beim Import die Verwendung von {} vermieden werden. Wie in import ____ from ____

  2. Vermeiden Sie die Verwendung des Standardworts. Dann sieht Ihr Export wie folgt aus: export class ____... Dann muss Ihr Import den {} verwenden. Wie import {____} from ____

0
jasonleonhard