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

Essayer d'obtenir react-router (v4.0.0) et react-hot-loader (3.0.0-beta.6) pour jouer correctement, mais obtenir 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 a: 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;

La plupart du temps, cela est dû à une exportation / importation incorrecte.

Erreur courante:

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

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

Option possible:

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

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

Il y a plusieurs façons dont cela pourrait être erroné, mais cette erreur est due à une incompatibilité d'importation / exportation 60% du temps, à chaque fois.

Éditer

Typiquement vous devriez obtenir un stacktrace qui indique un emplacement approximatif de l'endroit où l'échec se produit. Cela suit généralement juste après le message que vous avez dans votre question initiale.

S'il ne s'affiche pas, il peut être utile de rechercher pourquoi (il peut s'agir d'un paramètre de construction qui vous manque). Quoi qu'il en soit, si cela n'apparaît pas, le seul plan d'action est de réduire 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 remontez la pile.

Modifier 2

Via les commentaires, c'était en effet un problème d'importation, en particulier l'importation d'un module qui n'existait pas

J'avais aussi cette erreur.

J'utilisais:

import BrowserRouter from 'react-router-dom';

Fix faisait cela, à la place:

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

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;

Vous devez être conscient de named exportet default export. Voir Quand dois-je utiliser des accolades pour l'importation ES6?

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

import Provider from 'react-redux'

à

import { Provider } from 'react-redux'

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 é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 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: spécifiez toujours 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.

Pour les futurs googleurs:

Ma solution à ce problème était de mettre à niveau reactet react-domvers leurs dernières versions sur NPM. Apparemment, j'importais un composant qui utilisait la nouvelle syntaxe de fragment et il était cassé dans mon ancienne version de React.

Ce problème m'est apparu lorsque j'avais une mauvaise référence dans mon instruction de rendu / retour. (pointez sur une classe non existante). Vérifiez également votre code de déclaration de retour pour les mauvaises références.

La plupart du temps, cela indique une erreur d'import / export. Mais faites attention non seulement à vous assurer que le fichier référencé dans la trace de pile est bien exporté lui-même, mais également à ce que ce fichier importe correctement les autres composants . 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;

Je pense que la chose la plus importante à réaliser lors du dépannage de ce bogue est qu'il se manifeste lorsque vous essayez d'instancier un composant qui n'existe pas. Ce composant n'a pas besoin d'être importé. Dans mon cas, je passais des composants en tant que propriétés. J'ai oublié de mettre à jour l'un des appels pour passer correctement le composant après une refactorisation. Malheureusement, comme JS n'est pas typé statiquement, mon bogue n'a pas été détecté et il a fallu du temps pour comprendre ce qui se passait.

Pour résoudre ce bogue, inspectez le composant avant de le rendre, pour vous assurer qu'il s'agit du type de composant que vous attendez.

Il me manquait un fragment de réaction :

function Bar({ children }) {

  return (
    <div>
     {children}
    </div>
  );
}

function Foo() {
  return (
    <Bar>
      <Baz/>
      <Qux/>
    </Bar>
  );
}

Le code ci-dessus renvoie l'erreur ci-dessus. Mais cela corrige le problème:

<Bar>
  <>
    <Baz/>
    <Qux/>
  </>
</Bar>

Tableau de composants

Un moyen courant d'obtenir cette erreur consiste à utiliser un tableau de composants , avec un index de position utilisé pour sélectionner le composant à restituer à partir du tableau. J'ai vu un code comme celui-ci plusieurs fois:

const checkoutSteps = [Address, Shipment, Payment]

export const Checkout = ({step}) => {

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

Ce n'est pas un mauvais code nécessaire, mais si vous l'appelez avec un mauvais index (par exemple -1, ou 3dans ce cas), le ToRendercomposant lancera undefinedl' React.createElement: type is invalid...erreur:

<Checkout step={0} /> // <Address />
<Checkout step={1} /> // <Shipment />
<Checkout step={2} /> // <Payment />
<Checkout step={3} /> // undefined
<Checkout step={-1} /> // undefined

Une solution rationnelle

Vous devez vous protéger et protéger vos collègues de ce code difficile à déboguer en utilisant une approche plus explicite, en évitant les nombres magiques et en utilisant les PropTypes:

const checkoutSteps = {
  address: Address,
  shipment Shipment,
  payment: Payment
}

const propTypes = {
  step: PropTypes.oneOf(['address', 'shipment', 'payment']),
}

/* TIP: easier to maintain
const propTypes = {
  step: PropTypes.oneOf(Object.keys(checkoutSteps)),
}
*/

const Checkout = ({step}) => {

  const ToRender = checkoutSteps[step]

  return (
    <ToRender />
  )
}

Checkout.propTypes = propTypes

export default Checkout

Et votre code ressemblera à ceci:

// OK
<Checkout step="address" /> // <Address />
<Checkout step="shipment" /> // <Shipment />
<Checkout step="payment" /> // <Payment />

// Errors
<Checkout step="wrongstep" /> // explicit error "step must be one of..."
<Checkout step={3} /> // explicit error (same as above)
<Checkout step={myWrongVar} /> // explicit error (same as above)

Avantages de cette approche

• le code est plus explicite , vous pouvez clairement voir ce que vous voulez rendre
• vous n'avez pas besoin de vous souvenir des chiffres et de leur caché signification ( 1est pour l'adresse, 2 est pour ...)
• les erreurs sont explicites aussi
• pas de mal de tête pour vos pairs :)

Ce qui me manquait, c'était que j'utilisais

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

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

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

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

npm install react-router-dom@next --save

Dans mon cas, j'ai oublié d'importer et d'exporter mes (nouveaux) éléments appelés par le rendu dans le fichier index.js.

Dans mon cas, l'ordre dans lequel vous créez le composant et le rendu importait. J'étais en train de rendre le composant avant de le créer. Le meilleur moyen est de créer le composant enfant, puis les composants parents, puis de rendre le composant parent. La modification de la commande a résolu le problème pour moi.

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

En termes simples, en quelque sorte, ce qui suit se produit:

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

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

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

    return (
        <MyComponent />
    );
}

Si vous rencontrez cette erreur lors du test d'un composant, assurez-vous que chaque composant enfant est correctement rendu lorsqu'il est exécuté seul, si l'un de vos composants enfant dépend de ressources externes pour le rendu, essayez de le simuler avec jest ou toute autre bibliothèque moqueuse:

Exemple:

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

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 le publie ici afin que les futurs visiteurs qui se retrouvent coincés sur une erreur aussi stupide puissent éviter des heures de maux de tête, car cela n'est pas causé par une importation / exportation incorrecte.

La dépendance circulaire en est également une des raisons. [en général]

C'est une erreur qui a dû être déboguée. Comme cela a été dit à plusieurs reprises, une importation / exportation incorrecte peut provoquer cette erreur, mais étonnamment, j'ai eu cette erreur à cause d'un petit bogue dans monreact-router-dom authentication setup ci-dessous, c'est mon cas:

MAUVAISE CONFIGURATION:

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

CONFIGURATION CORRECT:

const PrivateRoute = ({ component: Component, token, ...rest }) => (
    <Route
        {...rest}
        render={(props) => (token ? <Component {...props} /> : <Redirect to={{ pathname: "/login" }} />)}
    />
);

La seule différence était que je déconstruisais le tokendans le PrivateRoute component. Au fait, le jeton est obtenu de localstoragecette const token = localStorage.getItem("authUser");manière, donc s'il n'est pas là, je sais que l'utilisateur n'est pas authentifié. Cela peut également provoquer cette erreur.

C'est assez simple, vraiment. J'ai eu ce problème lorsque j'ai commencé à coder React, et le problème est presque toujours dû au fait que l'importation:

import React, { memo } from 'react';

Vous pouvez utiliser la déstructuration car react lib a une propriété comme mémo, mais vous ne pouvez pas déstructurer quelque chose comme ça

import { user } from 'assets/images/icons/Profile.svg';

car ce n'est pas un objet.

J'espère que ça aide!

Réagir Fragment

a corrigé le problème pour moi

Code d'erreur:

 return (
            <section className={classes.itemForm}>
             <Card>
             </Card> 
            </section>
      );

Réparer

 return (
      <React.Fragment>
        <section className={classes.itemForm}>
         <Card>
         </Card> 
        </section>
      </React.Fragment>
  );

Ce n'est pas nécessairement un problème direct lié à l'importation / exportation. Dans mon cas, je rendais un élément enfant à l'intérieur d'un élément parent et l'élément enfant a un élément / tag jsx qui est utilisé mais pas importé. Je l'ai importé et je l'ai utilisé, puis il a résolu le problème. Donc, le problème était dans les éléments jsx qui sont à l'intérieur de l'élément enfant PAS l'exportation de l'élément enfant lui-même.

Je viens de passer 30 minutes à essayer de résoudre ce problème de base BASIC.

Mon problème était que j'importais des éléments natifs de réaction

par exemple import React, { Text, Image, Component } from 'react';

Et essayer de les utiliser, ce qui m'a fait recevoir cette erreur.

Une fois que je passe de <Text>la <p>et <Image>à <img>tout ce qui a fonctionné comme prévu.

J'obtenais cette erreur et aucune des réponses n'était mon cas, cela pourrait aider quelqu'un à rechercher sur Google:

Je définissais mal un Proptype:

ids: PropTypes.array(PropTypes.string)

Ça devrait être:

ids: PropTypes.arrayOf(PropTypes.string)

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

ÉDITER

Vous complexifiez le processus. Faites juste ceci:

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';

ReactDom.render(<routes />, document.getElementById('root'));

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;