Intentando que react-router (v4.0.0) y react-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 un desajuste de importación/exportación el 60% del tiempo, siempre.
Editar
Por lo general, debe obtener un seguimiento de pila que indique una ubicación aproximada de donde ocurre la falla. Esto generalmente sigue inmediatamente después del mensaje que tiene en su pregunta original.
Si no se muestra, 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 reducir dónde está fallando la exportación/importación.
Lamentablemente, la única forma de hacerlo, sin un seguimiento de la pila, es eliminar manualmente cada módulo/submódulo hasta que ya no obtenga el error, luego vuelva a subir en la pila.
Editar 2
A través de los comentarios, de hecho fue un problema de importación, específicamente importando un módulo que no existía
Estaba recibiendo este error también.
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@nexten 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;