reactjs - type - react.createelement example

React.createElement: el tipo no es válido; se esperaba una cadena

Question

Intentando que react-router (v4.0.0) y react-hot-loader (3.0.0-beta.6) funcionen bien, pero obteniendo el siguiente error en la consola del navegador:

Advertencia: React.createElement: el tipo no es válido: se esperaba una cadena (para componentes integrados) o una clase / función (para componentes compuestos) pero se obtuvo: indefinido. Probablemente olvidó exportar su componente desde el archivo en el que está definido.

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

Acabo de pasar 30 minutos tratando de resolver este problema básico BÁSICO.

Mi problema era que estaba importando elementos nativos de reacción

por ejemplo, import React, { Text, Image, Component } from ''react'';

Y tratando de usarlos, lo que me hizo recibir este error.

Una vez que cambie de <Text> a <p> y <Image> a <img> todo funcionó como se esperaba.

Answer 2

Debe tener en cuenta la named export y la default export . Consulte ¿ Cuándo debo usar llaves para importar ES6?

En mi caso, lo arreglé cambiando de

import Provider from ''react-redux''

a

import { Provider } from ''react-redux''

Answer 3

EDITAR

Estás complejando el proceso. Solo haz esto:

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;

Answer 4

En mi caso, el error ocurrió al intentar usar ContextApi. He usado por error:

const MyContext = () => createContext()

Pero debería haberse definido como:

const MyContext = createContext()

Lo estoy publicando aquí para que los futuros visitantes que se queden atrapados en un error tan tonto sean útiles para evitar horas de dolor de cabeza, porque esto no es causado por una importación / exportación incorrecta.

Answer 5

En mi caso, el orden en el que crea el componente y el render importaba. Estaba renderizando el componente antes de crearlo. La mejor manera es crear el componente secundario y luego los componentes principales y luego representar el componente principal. Cambiar el orden solucionó el problema para mí.

Answer 6

En mi caso, solo tuve que actualizar de react-router-redux a react-router-redux@next . Supongo que debe haber sido algún tipo de problema de compatibilidad.

Answer 7

En palabras simples, de alguna manera sucede lo siguiente:

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

Puede que no esté necesariamente relacionado con alguna importación o exportación incorrecta:

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

    return (
        <MyComponent />
    );
}

Answer 8

Este problema se me ocurrió cuando tenía una mala referencia en mi declaración de render / return. (apunte a una clase no existente). También revise su código de declaración de devolución para ver si hay referencias incorrectas.

Answer 9

La mayoría de las veces esto indica un error de importación / exportación. Pero tenga cuidado de no solo asegurarse de que el archivo al que se hace referencia en el seguimiento de la pila se exporte bien, sino también de que este archivo esté importando otros componentes correctamente. En mi caso, el error fue así:

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;

Answer 10

La mayoría de las veces esto sucede porque no ha exportado / importado correctamente.

Error común:

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

Hay algunas maneras en que podría estar mal, pero ese error se debe a un error de importación / exportación el 60% del tiempo, siempre.

Editar

Por lo general, debe obtener un seguimiento de la pila que indique una ubicación aproximada del lugar donde se produce la falla. Esto generalmente sigue inmediatamente después del mensaje que tiene en su pregunta original.

Si no se muestra, puede 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 falla la exportación / importación.

Lamentablemente, la única forma de hacerlo, sin un stacktrace es eliminar manualmente cada módulo / submódulo hasta que ya no reciba el error, luego vuelva a subir la pila.

Editar 2

A través de comentarios, de hecho fue un problema de importación, específicamente la importación de un módulo que no existía

Answer 11

Lo que me faltaba era que estaba usando

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

en cambio, la respuesta correcta debería ser:

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

Por supuesto, debe agregar el paquete npm react-router-dom :

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

Answer 12

Para futuros googlers:

Mi solución a este problema fue actualizar react y react-dom a sus últimas versiones en NPM. Aparentemente estaba importando un Componente que estaba usando la nueva sintaxis de fragmentos y estaba roto en mi versión anterior de React.

Answer 13

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;

Answer 14

Recibí este error y ninguna de las respuestas fue mi caso, podría ayudar a alguien a buscar en Google:

Estaba definiendo un Proptype mal:

ids: PropTypes.array(PropTypes.string)

Debería ser:

ids: PropTypes.arrayOf(PropTypes.string)

VSCode y el error de compilación no me dieron una pista correcta.

Answer 15

Si tiene este error al probar un componente, asegúrese de que cada componente secundario se procese correctamente cuando se ejecute solo, si uno de sus componentes secundarios depende de recursos externos para renderizar, intente burlarse de él con jest o cualquier otra imitación burlona:

Ejemplo:

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

Answer 16

También recibí este error.

Estaba usando:

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

Fix estaba haciendo esto, en cambio:

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

Answer 17

Tuve este problema cuando agregué un archivo CSS a la misma carpeta que el archivo componente.

Mi declaración de importación fue:

import MyComponent from ''../MyComponent''

lo cual estaba bien cuando solo había un único archivo, MyComponent.jsx. (Vi este formato en un ejemplo y lo probé, luego olvidé que lo había hecho)

Cuando agregué MyComponent.scss a la misma carpeta, la importación falló. Tal vez JavaScript cargó el archivo .scss en su lugar, por lo que no hubo ningún error.

Mi conclusión: siempre especifique la extensión del archivo, incluso si solo hay un archivo, en caso de que agregue otro más tarde.