React.createElement : type is invalid -- expected a string

Question

J'essaie de faire jouer react-router (v4.0.0) et react-hot-loader (3.0.0-beta.6), mais j'obtiens l'erreur suivante dans la console du navigateur :

Avertissement : React.createElement : type is invalid -- expected a string (pour les composants intégrés) ou une classe/fonction (pour les composants composites). composites) mais a obtenu : undefined. Vous avez probablement oublié d'exporter votre composant depuis le 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;

Answer 1

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

Erreur courante :

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

Il y a plusieurs façons de se tromper, mais cette erreur est due à une erreur d'importation/exportation dans 60 % des cas, à chaque fois.

Editar

En général, vous debe obtenir un suivi de pile qui indique l'emplacement approximatif de l'échec. Cela suit généralement directement le message que vous avez indiqué dans votre question initiale.

S'il ne s'affiche pas, cela peut valoir la peine de chercher pourquoi (il peut s'agir d'un paramètre de construction qui vous manque). Quoi qu'il en soit, s'il ne s'affiche pas, la seule chose à faire est d'affiner la recherche. où l'exportation/importation échoue.

Malheureusement, la seule façon de le faire, sans trace de pile, est de supprimer manuellement chaque module/sous-module jusqu'à ce que vous n'obteniez plus l'erreur, puis de remonter la pile.

Edit 2

Via les commentaires, c'était en effet un problème d'importation, spécifiquement l'importation d'un module qui n'existe pas.

Answer 2

J'ai également obtenu cette erreur.

J'utilisais :

import BrowserRouter from 'react-router-dom';

La réparation faisait ça, à la place :

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

Answer 3

Essayez ceci

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;

Answer 4

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

Ma déclaration d'importation était :

import MyComponent from '../MyComponent'

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

Lorsque j'ai ajouté MyComponent.scss dans le même dossier, l'importation a é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 du fichier même s'il n'y a qu'un seul fichier, au cas où vous en ajouteriez un autre plus tard.

Answer 5

Ce qui manquait pour moi était que j'utilisais

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

au lieu 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