React.createElement: el tipo no es válido; se esperaba una cadena
Intento hacer que reaccionar-router (v4.0.0) y reaccionar-hot-loader (3.0.0-beta.6) funcionen bien, pero aparece el siguiente error en la consola del navegador:
Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite
components) but got: undefined. You likely forgot to export your
component from the file it's defined in.
índice.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() );
rutas.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 mayoría de las veces esto se debe a una exportación/importación incorrecta.
Error común:
// File: LeComponent.js
export class LeComponent extends React.Component { ... }
// File: App.js
import LeComponent from './LeComponent';
Posible opción:
// File: LeComponent.js
export default class LeComponent extends React.Component { ... }
// File: App.js
import LeComponent from './LeComponent';
Hay algunas formas en que podría estar mal, pero ese error se debe a una discrepancia entre la importación y la exportación el 60% de las veces, siempre.
Editar
Normalmente debería obtener un seguimiento de pila que indique una ubicación aproximada de donde ocurre la falla. Por lo general, esto sigue inmediatamente después del mensaje que tiene en su pregunta original.
Si no aparece, podría valer la pena investigar por qué (podría ser una configuración de compilación que te falta). De todos modos, si no se muestra, el único curso de acción es limitar dónde falla la exportación/importación.
Lamentablemente, la única forma de hacerlo, sin un seguimiento de pila, es eliminar manualmente cada módulo/submódulo hasta que ya no reciba el error y luego volver a subir en la pila.
Editar 2
A través de los comentarios, efectivamente se trataba de un problema de importación, específicamente al importar un módulo que no existía.
También recibí este error.
Estaba usando:
import BrowserRouter from 'react-router-dom';
Fix estaba haciendo esto, en su lugar:
import { BrowserRouter } from 'react-router-dom';
Prueba esto
npm i react-router-dom@next
en tu 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;