it-swarm.com.de

React.createElement: Typ ist ungültig - erwartet eine Zeichenfolge

Der Versuch, React-Router (v4.0.0) und React-Hot-Loader (3.0.0-Beta.6) zum einwandfreien Spielen zu bringen, aber in der Browserkonsole wird der folgende Fehler angezeigt:

Warnung: React.createElement: Typ ist ungültig - erwartet eine Zeichenfolge (für eingebaute Komponenten) oder eine Klasse/Funktion (für zusammengesetzte Komponenten), aber erhalten: undefiniert. Sie haben wahrscheinlich vergessen, Ihre Komponente aus der Datei zu exportieren, in der sie definiert ist.

index.js:

import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
require('jquery');
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import './css/main.css';

const renderApp = (appRoutes) => {
    ReactDom.render(appRoutes, document.getElementById('root'));
};

renderApp( routes() );

routes.js:

import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import store from './store/store.js';
import { Provider } from 'react-redux';
import App from './containers/App.jsx';
import Products from './containers/shop/Products.jsx';
import Basket from './containers/shop/Basket.jsx';

const routes = () => (

    <AppContainer>
        <Provider store={store}>
            <Router history={browserHistory}>
                <Route path="/" component={App}>
                    <IndexRoute component={Products} />
                    <Route path="/basket" component={Basket} />
                </Route>
            </Router>
        </Provider>
    </AppContainer>

);

export default routes;
61
JoeTidee

Meistens geschieht dies, weil Sie nicht richtig exportiert/importiert haben.

Häufiger Fehler:

// File: LeComponent.js
export class LeComponent extends React.Component { ... }

// File: App.js
import LeComponent from './LeComponent';

// no "default" export, should be  export default class LeComponent

Es gibt einige Möglichkeiten, wie es falsch sein könnte, aber dieser Fehler ist jedes Mal 60% der Zeit auf einen Import-/Exportfehler zurückzuführen.

Bearbeiten

In der Regel erhalten Sie sollte ein Stacktrace, das die ungefähre Position angibt, an der der Fehler auftritt. Dies folgt in der Regel direkt nach der Nachricht, die Sie in Ihrer ursprünglichen Frage haben.

Wenn es nicht angezeigt wird, lohnt es sich möglicherweise zu untersuchen, warum (möglicherweise fehlt eine Build-Einstellung). Unabhängig davon, ob dies nicht angezeigt wird, besteht die einzige Vorgehensweise darin, den Export/Import zu beschränken where.

Leider besteht die einzige Möglichkeit, ohne Stacktrace zu arbeiten, darin, jedes Modul/Submodul manuell zu entfernen, bis der Fehler nicht mehr angezeigt wird, und dann den Stack wieder aufzubauen.

Edit 2

Über Kommentare handelte es sich in der Tat um ein Importproblem, nämlich das Importieren eines nicht vorhandenen Moduls

82
Chris

Versuche dies

npm i [email protected]

in Ihrem App.js

import { BrowserRouter as Router, Route } from 'react-router-dom'

const Home = () => <h1>Home</h1>

const App = () =>(
  <Router>
    <Route path="/" component={Home} />
  </Router>
)

export default App;
9
Ignatius Andrew

Ich habe auch diesen Fehler bekommen.

Ich habe benutzt:

import BrowserRouter from 'react-router-dom';

Fix tat dies stattdessen:

import { BrowserRouter } from 'react-router-dom';

6

Ich hatte dieses Problem, als ich eine CSS-Datei zum selben Ordner wie die Komponentendatei hinzufügte.

Mein Import Statement war:

import MyComponent from '../MyComponent'

das war in Ordnung, wenn es nur eine einzige Datei gab, MyComponent.jsx. (Ich habe dieses Format in einem Beispiel gesehen und ausprobiert und dann vergessen, dass ich es getan habe.)

Wenn ich MyComponent.scss zum selben Ordner hinzugefügt habe, ist der Import fehlgeschlagen. Vielleicht hat JavaScript stattdessen die .scss-Datei geladen, und so gab es keinen Fehler.

Mein Fazit: Geben Sie immer die Dateierweiterung an, auch wenn es nur eine Datei gibt, falls Sie später eine weitere hinzufügen.

4
Little Brain

Für zukünftige Googler:

Meine Lösung für dieses Problem bestand darin, react und react-dom Auf ihre neuesten NPM-Versionen zu aktualisieren. Anscheinend habe ich eine Komponente importiert, die die neue Fragmentsyntax verwendete, und sie war in meiner älteren Version von React fehlerhaft.

2
colinbr96

Dieses Problem ist mir aufgefallen, als ich in meiner Render/Return-Anweisung einen falschen Verweis hatte. (zeigen Sie auf eine nicht vorhandene Klasse). Überprüfen Sie auch Ihren Rückkehranweisungscode auf fehlerhafte Referenzen.

1
Cornelius

Was mir fehlte, war, dass ich benutzte

import { Router, Route, browserHistory, IndexRoute } from 'react-router';

stattdessen sollte die richtige Antwort lauten:

import { BrowserRouter as Router, Route } from 'react-router-dom';

Natürlich müssen Sie das Paket npm hinzufügen react-router-dom:

npm install [email protected] --save
1
Pranav Singh

Ich habe diesen Fehler erhalten und keine der Antworten war mein Fall, es könnte jemandem helfen zu googeln:

Ich habe einen falschen Proptyp definiert:

ids: PropTypes.array(PropTypes.string)

Es sollte sein:

ids: PropTypes.arrayOf(PropTypes.string)

VSCode und der Kompilierungsfehler gaben mir keinen korrekten Hinweis.

0
llessa

Sie müssen sich bewusst sein, named export und default export. Siehe Wann sollte ich geschweifte Klammern für den ES6-Import verwenden?

In meinem Fall habe ich es durch einen Wechsel von behoben

import Provider from 'react-redux'

zu

import { Provider } from 'react-redux'
0
onmyway133

Meistens deutet dies auf einen Import-/Exportfehler hin. Achten Sie jedoch darauf, dass nicht nur die Datei, auf die im Stack-Trace verwiesen wird, ordnungsgemäß exportiert wird, sondern auch, dass diese Datei importiert wird andere Komponenten richtig. In meinem Fall war der Fehler so:

import React from 'react';

// Note the .css at the end, this is the cause of the error!
import SeeminglyUnimportantComponent from './SeeminglyUnimportantComponent.css';

const component = (props) => (            
  <div>
    <SeeminglyUnimportantComponent />
    {/* ... component code here */}
  </div>    
);

export default component;
0
Felipe Suárez

In einfachen Worten geschieht irgendwie Folgendes:

render() {
    return (
        <MyComponent /> // MyComponent is undefined.
    );
}

Es muss nicht unbedingt mit einem falschen Import oder Export zusammenhängen:

render() {
    // MyComponent may be undefined here, for example.
    const MyComponent = this.wizards[this.currentStep];

    return (
        <MyComponent />
    );
}
0
falsarella

In meinem Fall war die Reihenfolge, in der Sie die Komponente erstellen und rendern, von Bedeutung. Ich habe die Komponente gerendert, bevor ich sie erstellt habe. Am besten erstellen Sie die untergeordnete Komponente und dann die übergeordneten Komponenten und rendern dann die übergeordnete Komponente. Das Ändern der Reihenfolge behebt das Problem für mich.

0

In meinem Fall ist der Fehler bei der Verwendung von ContextApi aufgetreten. Ich habe fälschlicherweise verwendet:

const MyContext = () => createContext()

Aber es sollte definiert worden sein als:

const MyContext = createContext()

Ich poste es hier, damit zukünftige Besucher, die auf solch einen dummen Fehler stecken bleiben, es hilfreich finden, stundenlange Kopfschmerzen zu vermeiden, da dies nicht durch falschen Import/Export verursacht wird.

0

Wenn Sie diesen Fehler beim Testen einer Komponente haben, stellen Sie sicher, dass jede untergeordnete Komponente korrekt gerendert wird, wenn sie alleine ausgeführt wird. Wenn eine Ihrer untergeordneten Komponenten zum Rendern von externen Ressourcen abhängt, versuchen Sie, sie mit einem Scherz oder einer anderen spöttischen Bibliothek zu verspotten:

Beispiel:

jest.mock('pathToChildComponent', () => 'mock-child-component')
0
Ze Rubeus

In meinem Fall musste ich nur ein Upgrade von react-router-redux bis [email protected]. Ich gehe davon aus, dass es eine Art Kompatibilitätsproblem gewesen sein muss.

0
dspacejs