web-dev-qa-db-fra.com

React.createElement: le type n'est pas valide - chaîne attendue

Essayer de faire bien réagir react-router (v4.0.0) et react-hot-loader (3.0.0-beta.6), mais obtenez l'erreur suivante dans la console du navigateur:

Avertissement: React.createElement: type n'est pas valide - attend une chaîne (pour les composants intégrés) ou une classe/fonction (pour les composants composites) mais get: undefined. Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini.

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;
reactjsreact-routerreact-hot-loader
61
JoeTidee

La plupart du temps, cela se produit parce que vous n'avez pas exporté/importé correctement.

Erreur commune:

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

Cela peut être erroné de plusieurs manières, mais cette erreur est due à une erreur d'importation/exportation dans 60% des cas, à chaque fois.

Éditer

En règle générale, vous devriez obtenir un stacktrace qui indique l'emplacement approximatif de l'emplacement de la défaillance. Cela suit généralement tout de suite après le message que vous avez dans votre question initiale.

Si cela ne s'affiche pas, il serait peut-être intéressant de rechercher pourquoi (il se peut que vous manquiez d'un paramètre de construction). Quoi qu’il en soit, s’il n’apparaît pas, la seule solution possible consiste à réduire les cas où l’exportation/importation a échoué.

Malheureusement, le seul moyen de le faire, sans pile, est de supprimer manuellement chaque module/sous-module jusqu'à ce que vous n'ayez plus l'erreur, puis de remonter dans la pile.

Edit 2

Via des commentaires, il s’agissait bien d’un problème d’importation, plus précisément d’un module inexistant

82
Chris

Essaye ça

npm i react-router-dom@next

dans votre 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

J'avais aussi cette erreur.

J'utilisais:

import BrowserRouter from 'react-router-dom';

Fix faisait cela à la place:

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

6
Pedro Gonçalves

J'ai eu ce problème lorsque j'ai ajouté un fichier CSS dans le même dossier que le fichier de composant.

Ma déclaration d'importation était:

import MyComponent from '../MyComponent'

ce qui était bien quand il n'y avait qu'un seul fichier, MyComponent.jsx. (J'ai vu ce format dans un exemple et l'ai essayé, puis j'ai oublié que je l'avais fait)

Lorsque j'ai ajouté MyComponent.scss au même dossier, l'importation a ensuite échoué. Peut-être que JavaScript a chargé le fichier .scss à la place et qu'il n'y a donc pas eu d'erreur.

Ma conclusion: toujours spécifier l'extension de fichier même s'il n'y a qu'un seul fichier, au cas où vous en ajouteriez un plus tard.

4
Little Brain

Pour les futurs googlers:

Ma solution à ce problème consistait à mettre à niveau react et react-dom vers leur dernière version sur NPM. Apparemment, j'importais un composant qui utilisait la nouvelle syntaxe de fragment et il était cassé dans mon ancienne version de React.

2
colinbr96

Ce problème s'est produit lorsque j'ai eu une mauvaise référence dans ma déclaration de rendu/retour. (pointez sur une classe non existante). Vérifiez également le code de votre déclaration de retour pour les mauvaises références.

1
Cornelius

Qu'est-ce qui me manquait j'utilisais

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

à la place ou la réponse correcte devrait être:

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

Bien sûr, vous devez ajouter le paquet npm react-router-dom:

npm install react-router-dom@next --save
1
Pranav Singh

Je recevais cette erreur et aucune des réponses n'était mon cas, cela pourrait aider quelqu'un à googler:

Je définissais un Proptype faux:

ids: PropTypes.array(PropTypes.string)

CA devrait etre:

ids: PropTypes.arrayOf(PropTypes.string)

VSCode et l'erreur de compilation ne m'ont pas donné un indice correct.

0
llessa

Vous devez connaître named export et default export. Voir Quand devrais-je utiliser des accolades pour l'importation ES6?

Dans mon cas, je l'ai corrigé en changeant de

import Provider from 'react-redux'

à

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

La plupart du temps, cela indique une erreur d'importation/exportation. Mais veillez à ce que le fichier référencé dans la trace de la pile soit bien exporté, mais également à l’importation de ce fichier autres composants correctement. Dans mon cas, l'erreur était comme ceci:

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

En termes simples, voici ce qui se passe:

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

Cela peut ne pas être nécessairement lié à une importation ou une exportation incorrecte:

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

    return (
        <MyComponent />
    );
}
0
falsarella

Dans mon cas, l'ordre dans lequel vous créez le composant et le rendu importait. Je rendais le composant avant de le créer. La meilleure méthode consiste à créer le composant enfant, puis les composants parents, puis à rendre le composant parent. Changer l'ordre a résolu le problème pour moi.

0
Mahesh Kumar Ronde

Dans mon cas, l'erreur s'est produite lors de la tentative d'utilisation de ContextApi. J'ai utilisé par erreur:

const MyContext = () => createContext()

Mais cela aurait dû être défini comme:

const MyContext = createContext()

Je l'affiche ici pour que les futurs visiteurs qui se coinceraient dans une erreur aussi stupide le trouvent utile pour éviter des heures de maux de tête, car cela n'est pas dû à une importation/exportation incorrecte.

0
Bhojendra Rauniyar

Si vous rencontrez cette erreur lors du test d'un composant, assurez-vous que chaque composant enfant s'affiche correctement lorsqu'il est exécuté seul. Si l'un de vos composants enfants dépend de ressources externes à restituer, essayez de le simuler avec une plaisanterie ou une autre lib moqueuse:

Exemple:

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

Dans mon cas, je devais simplement passer de react-router-redux à react-router-redux@next. Je suppose que cela a dû être une sorte de problème de compatibilité.

0
dspacejs