Error no detectado: Infracción invariable: el tipo de elemento no es válido: se esperaba una cadena (para componentes integrados) o una clase / función pero se obtuvo: objeto

Recibo este error:

Error no detectado: Infracción invariable: El tipo de elemento no es válido: se esperaba una cadena (para componentes integrados) o una clase / función (para componentes compuestos) pero se obtuvo: objeto.

Este es mi código:

var React = require('react')
var ReactDOM =  require('react-dom')
var Router = require('react-router')
var Route = Router.Route
var Link = Router.Link

var App = React.createClass({
  render() {
    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><Link to="/about">About</Link></li>
        </ul>
      </div>
    )
  }
})

var About = require('./components/Home')
ReactDOM.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About} />
    </Route>
  </Router>
), document.body)

Mi Home.jsxarchivo:

var React = require('react');
var RaisedButton = require('material-ui/lib/raised-button');

var Home = React.createClass({
  render:function() {
    return (
        <RaisedButton label="Default" />
    );
  },
});

module.exports = Home;

En mi caso ( usando Webpack ) fue la diferencia entre:

import {MyComponent} from '../components/xyz.js';

vs

import MyComponent from '../components/xyz.js';

El segundo funciona mientras que el primero está causando el error. O lo contrario.

necesita exportar por defecto o requiere (ruta) .default

var About = require('./components/Home').default

¿Acabas de modularizar alguno de tus componentes React? En caso afirmativo, obtendrá este error si olvidó especificar module.exports , por ejemplo:

componente / código no modularizado previamente válido:

var YourReactComponent = React.createClass({
    render: function() { ...

componente / código modularizado con módulo . exportaciones :

module.exports = React.createClass({
    render: function() { ...

Si recibe este error, puede deberse a que está importando un enlace utilizando

import { Link } from 'react-router'

en cambio, podría ser mejor usar

importar {Link} desde ' react-router-dom '
                      ^ -------------- ^

Creo que este es un requisito para la versión 4 del router react

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router también es una de las propiedades de react-router. Así que cambie sus módulos requieren un código como ese:

  var reactRouter = require('react-router')
  var Router = reactRouter.Router
  var Route = reactRouter.Route
  var Link = reactRouter.Link

Si desea usar la sintaxis ES6, use el enlace ( import), use babel como ayudante.

Por cierto, para hacer sus obras de código, podemos añadir {this.props.children}en el App, al igual

render() {
  return (
    <div>
      <h1>App</h1>
      <ul>
        <li><Link to="/about">About</Link></li>
      </ul>
      {this.props.children}
    </div>

  )
}

No se sorprenda con la lista de respuestas para una sola pregunta. Hay varias causas para este problema;

Para mi caso, la advertencia fue

warning.js: 33 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. Verifique su código en index.js: 13.

Seguido por el error

invariant.js: 42 Error no detectado: el tipo de elemento 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.

No pude entender el error ya que no menciona ningún método o nombre de archivo. Pude resolver solo después de mirar esta advertencia, mencionada anteriormente.

Tengo la siguiente línea en index.js.

<ConnectedRouter history={history}>

Cuando busqué en Google el error anterior con la palabra clave "ConnectedRouter" , encontré la solución en una página de GitHub.

El error se debe a que, cuando instalamos el react-router-reduxpaquete, por defecto lo instalamos. https://github.com/reactjs/react-router-redux pero no la biblioteca real.

Para resolver este error, instale el paquete adecuado especificando el alcance npm con @

npm install react-router-redux@next

No necesita eliminar el paquete instalado incorrectamente. Se sobrescribirá automáticamente.

Gracias.

PD: incluso la advertencia te ayuda. No descuides la advertencia solo mirando el error solo.

En mi caso, uno de los módulos secundarios exportados no devolvía un componente de reacción adecuado.

const Component = <div> Content </div>;

en vez de

const Component = () => <div>Content</div>;

El error que se muestra fue para el padre, por lo tanto no se pudo resolver.

En mi caso, eso fue causado por símbolos de comentarios incorrectos. Esto está mal:

<Tag>
    /*{ oldComponent }*/
    { newComponent }
</Tag>

Esto es correcto:

<Tag>
    {/*{ oldComponent }*/}
    { newComponent }
</Tag>

Observe las llaves

Tengo el mismo error: ERROR FIX !!!!

Uso 'react-router-redux' v4 pero es mala. Después de instalar npm react-router-redux @ next estoy en "react-router-redux": "^ 5.0.0-alpha.9",

Y ES TRABAJO

Obtuve esto al import App from './app/';esperar que se importe ./app/index.js, pero en su lugar se importó ./app.json.

Estaba teniendo el mismo problema y me di cuenta de que estaba proporcionando un componente Reacción indefinida en el marcado JSX. ¡La cuestión es que el componente de reacción para renderizar se calculó dinámicamente y terminó siendo indefinido!

El error declaró:

Infracción invariable: el tipo de elemento 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. Verifique el método de representación de C.,

El ejemplo que produce este error:

var componentA = require('./components/A');
var componentB = require('./components/B');

const templates = {
  a_type: componentA,
  b_type: componentB
}

class C extends React.Component {
  constructor(props) {
    super(props);
  }
  
  // ...
  
  render() {
    //Let´s say that depending on the uiType coming in a data field you end up rendering a component A or B (as part of C)
    const ComponentTemplate = templates[this.props.data.uiType];
    return <ComponentTemplate></ComponentTemplate>
  }
  
  // ...
}

El problema fue que se proporcionó un "uiType" no válido y, por lo tanto, esto estaba produciendo indefinido como resultado:

templates['InvalidString']

Solo como una rápida adición a esto. Estaba teniendo el mismo problema y mientras Webpack estaba compilando mis pruebas y la aplicación funcionaba bien. Cuando estaba importando mi componente al archivo de prueba, estaba usando el caso incorrecto en una de las importaciones y eso estaba causando el mismo error.

import myComponent from '../../src/components/myComponent'

Debería haber sido

import myComponent from '../../src/components/MyComponent'

Tenga en cuenta que el nombre de importación myComponentdepende del nombre de la exportación dentro del MyComponentarchivo.

Tuve un problema similar con las últimas versiones de React Native 0.50 y posteriores.

Para mí fue una diferencia entre:

import App from './app'

y

import App from './app/index.js'

(este último solucionó el problema). Me tomó horas captar este extraño, difícil de notar matiz :(

Otra posible solución, que funcionó para mí:

Actualmente, react-router-reduxestá en beta y npm devuelve 4.x, pero no 5.x. Pero el @types/react-router-reduxregreso 5.x. Por lo tanto, se utilizaron variables indefinidas.

Obligar a NPM / Yarn a usar 5.x lo resolvió para mí.

Dado su error de:

'Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object'

Tienes 2 opciones:

1. Su archivo de exportación puede tener la palabra defaultcomo en export default class ____.... Entonces su importación deberá evitar su uso {}. Como enimport ____ from ____

2. Evite usar la palabra predeterminada. Entonces su exportación se ve así. export class ____... Luego, su importación debe usar el {}. Me gustaimport {____} from ____

En mi caso, la importación estaba sucediendo implícitamente debido a una biblioteca.

Logré arreglarlo cambiando

export class Foo

a

export default class Foo.

Me encontré con este error cuando tenía un archivo .jsx y .scss en el mismo directorio con el mismo nombre raíz.

Entonces, por ejemplo, si tiene Component.jsxy está Component.scssen la misma carpeta e intenta hacer esto:

import Component from ./Component

Webpack aparentemente se confunde y, al menos en mi caso, trata de importar el archivo scss cuando realmente quiero el archivo .jsx.

Pude solucionarlo cambiando el nombre del archivo .scss y evitando la ambigüedad. También podría haber importado explícitamente Component.jsx

Y en mi caso, solo faltaba un punto y coma en la declinación de importación en uno de mis submódulos.

Se solucionó cambiando esto:

import Splash from './Splash'

a esto:

import Splash from './Splash';

En mi caso, estaba usando la exportación predeterminada, pero no exportaba una functiono React.Component, sino solo unaJSX elemento, es decir,

Error:

export default (<div>Hello World!</div>)

Trabajos :

export default () => (<div>Hello World!</div>)

Además de import/ exportproblemas mencionados. Encontré que usar React.cloneElement()para agregar propsa un elemento secundario y luego representarlo me dio el mismo error.

Tuve que cambiar:

render() {
  const ChildWithProps = React.cloneElement(
    this.props.children,
    { className: `${PREFIX}-anchor` }
  );

  return (
    <div>
      <ChildWithProps />
      ...
    </div>
  );
}

a:

render() {
  ...
  return (
    <div>
      <ChildWithProps.type {...ChildWithProps.props} />
    </div>
  );
}

Vea los React.cloneElement() documentos para más información.

Recibí este error en el enrutamiento de reacción, el problema era que estaba usando

<Route path="/" component={<Home/>} exact />

pero era una ruta incorrecta requiere componente como clase / función, así que lo cambié a

<Route path="/" component={Home} exact />

Y funcionó. (Solo evite las llaves alrededor del componente)

Para mí fue que mis componentes con estilo se definieron después de la definición de mi componente funcional. Solo estaba sucediendo en la puesta en escena y no localmente para mí. Una vez que moví mis componentes con estilo sobre mi definición de componente, el error desapareció.

Significa que algunos de sus componentes importados se declaran incorrectamente o no existen

Tuve un problema similar, lo hice

import { Image } from './Shared'

pero cuando busqué en el archivo Compartido no tenía un componente 'Imagen' sino un Componente 'ItemImage'

import { ItemImage } from './Shared';

Esto sucede cuando copia el código de otros proyectos;)

Tuve un problema con React.Fragment, porque la versión de mi reacción era < 16.2, así que me deshice de ella.

@Balasubramani M me salvó aquí. Quería agregar uno más para ayudar a las personas. Este es el problema cuando estás pegando demasiadas cosas y siendo arrogante con las versiones. Actualicé una versión de material-ui y necesito cambiar

import Card, {CardContent, CardMedia, CardActions } from "@material-ui/core/Card"; 

a esto:

import Card from '@material-ui/core/Card';
import CardActions from '@material-ui/core/CardActions';
import CardContent from '@material-ui/core/CardContent';
import CardMedia from '@material-ui/core/CardMedia';

Tuve el mismo problema y el problema fue que algunos archivos js no se incluyeron en el paquete de esa página específica. Intente incluir esos archivos y el problema podría solucionarse. Hice esto:

.Include("~/js/" + jsFolder + "/yourjsfile")

y me solucionó el problema.

Esto fue mientras estaba usando React en Dot NEt MVC

He descubierto otra razón para este error. Tiene que ver con el CSS-in-JS que devuelve un valor nulo al JSX de nivel superior de la función de retorno en un componente React.

Por ejemplo:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return null;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Recibiría esta advertencia:

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: nulo.

Seguido de este error:

Error no detectado: el tipo de elemento no es válido: se esperaba una cadena (para componentes integrados) o una clase / función (para componentes compuestos) pero se obtuvo: nulo.

Descubrí que era porque no había CSS con el componente CSS-in-JS que estaba tratando de renderizar. Lo arreglé asegurándome de que se devolviera CSS y no de un valor nulo.

Por ejemplo:

const Css = styled.div`
<whatever css>
`;
export function exampleFunction(args1) {
  ...
  return Css;
}

export default class ExampleComponent extends Component {
...
render() {
const CssInJs = exampleFunction(args1);
  ...
  return (
    <CssInJs>
      <OtherCssInJs />
      ...
    </CssInJs>
  );
}

Recibo casi el mismo error:

Error no detectado (en promesa): el tipo de elemento no es válido: se esperaba una cadena (para componentes integrados) o una clase / función (para componentes compuestos) pero se obtuvo: objeto.

Intenté importar un componente funcional puro de otra biblioteca de nodos que mi equipo ha desarrollado. Para solucionarlo, tuve que cambiar a una importación absoluta (haciendo referencia a la ruta al componente interno node_modules) desde

importar FooBarList desde 'team-ui';

a

importar FooBarList desde 'team-ui / lib / components / foo-bar-list / FooBarList';

En mi caso, terminó siendo el componente externo importado de esta manera:

import React, { Component } from 'react';

y luego declaró como:

export default class MyOuterComponent extends Component {

donde un componente interno importó el React bare:

import React from 'react';

y punteado en él para la declaración:

export default class MyInnerComponent extends ReactComponent {

En mi caso, me llevó bastante tiempo buscar y comprobar muchas formas, pero solo lo solucioné de esta manera: elimine "{", "}" al importar un componente personalizado:

import OrderDetail from './orderDetail';

Mi manera equivocada fue:

import { OrderDetail } from './orderDetail';

Porque en el archivo orderDetail.js, exporté OrderDetail como la clase predeterminada:

class OrderDetail extends Component {
  render() {
    return (
      <View>
        <Text>Here is an sample of Order Detail view</Text>
      </View>
    );
  }
}

export default OrderDetail;