web-dev-qa-db-fra.com

Le type d'élément n'est pas valide: on attend une chaîne (pour les composants intégrés) ou une classe/fonction

import React from 'react';
import ReactDOM from 'react-dom';
import Map from './components/map/container/map';
import App from './App';
import './index.css';
import Shell from './shared/utility/Shell';
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, applyMiddleware, compose } from 'redux'
import { routerMiddleware, ConnectedRouter } from 'react-router-redux'
import thunk from 'redux-thunk'
import createHistory from 'history/createBrowserHistory'
import rootReducer from './reducers'
import registerServiceWorker from './registerServiceWorker';
import { Routes } from './config';

const history = createHistory();
const target = document.querySelector('#root')
const initialState = {};
const enhancers = [];
const middleware = [
thunk,
routerMiddleware(history)
 ];

if (process.env.NODE_ENV === 'development') {
const devToolsExtension = window.devToolsExtension;

if (typeof devToolsExtension === 'function') {
enhancers.Push(devToolsExtension());
 }
}
const composedEnhancers = compose(
applyMiddleware(...middleware),
  ...enhancers
);
const store = createStore(
 rootReducer,
 initialState,
 composedEnhancers
);
render(
  <Provider store={store}>
   <ConnectedRouter history={history}>
    <div>
     <Routes />
    </div>
   </ConnectedRouter>
  </Provider>,
  target
   )
 registerServiceWorker();
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();

J'essaie d'appeler une API à l'aide de redux et d'afficher ses données dans un tableau. Je reçois cette erreur. Ci-dessus, mon fichier index.js. 

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

2 . 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 got: non défini. Vous avez probablement oublié d'exporter votre composant à partir du fichier dans lequel il est défini.

J'ai fait référence à de nombreuses réponses que je ne suis pas capable de reconnaître l'erreur.

reactjsredux
10
Varun thadhani

Le problème est dans les déclarations d'importation. Vous n'avez pas utilisé d'accolades lors de l'importation de composants tels que createHistory.

Si un composant utilise une exportation par défaut telle que:

export default X

Ensuite, vous pouvez simplement l'importer comme ceci:

import X from './X';

Mais si vous utilisez une exportation nommée telle que:

export const X=1;

Ensuite, vous devez l'importer avec des accolades telles que:

import {X} from './X';

Regardez donc vos importations. Cela résoudra votre problème.

11
Vikram Saini

J'ai rencontré le même problème dans mon application de réaction. C’est bien vos déclarations d’importation, comme indiqué ci-dessus ... J'ai changé 
import {x} from '/x.js'
à
import x from '/x.js'
et que le travail soit fait

2
Olumide

En ce qui me concerne, j’ai fait face à ce problème en oubliant d’utiliser la variable connect de react-redux dans mon export.

Alors,

en changeant:

 export default(mapStateToProps, mapDispatchToProps)(ContentTile);

À:

export default connect(mapStateToProps, mapDispatchToProps)(ContentTile);

résolu le problème. Erreur vraiment stupide

1
Jordan Daniels

J'ai également rencontré cette erreur lorsqu'un des composants imbriqués a tenté de restituer un composant inexistant. Plus précisément, j'ai essayé d'utiliser 

<Button ... />

un composant natif de React dans lequel j'aurais dû utiliser 

<button ... />
1
TMin

Cela peut également être causé à partir du point d’entrée.

Dans mon cas, App.js appelait index.js (où la console de développement identifiait l'erreur et où se trouvait mon appel RenderDom). 

Cependant, App.js faisait référence à un composant et c'est dans ce composant que l'erreur s'est produite (une référence à encore un autre composant qui n'existe pas).

0
Bob Aleena

Comme il a été dit plus haut, ce problème d’importation. Dans mon cas, il s'agissait d'une importation CSSTransitionGroup. Après la mise à jour de npm, le package 'react-transition-group' ne contient plus CSSTransitionGroup, mais contient différentes exportations, comme CSSTransition et TransitionGroup. Donc je viens de remplacer la ligne: 

import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

avec

import TransitionGroup from 'react-transition-group/TransitionGroup';
0
Victor