reactjs - react - 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

react helmet sync

Question

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 archivo Home.jsx :

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;

Answer 1

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 default como en export default class ____.... Luego, su importación deberá evitar usar {} a su alrededor. Como en la import ____ from ____

2. Evite usar la palabra predeterminada. Entonces su exportación se parece a export class ____... Luego, su importación debe usar el {} . Como import {____} from ____

Answer 2

¿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() { ...

Answer 3

@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'';

Answer 4

Además de import problemas de import / export mencionados. Descubrí que usar React.cloneElement() para agregar props a 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>
);
}

Consulte los docs React.cloneElement() para obtener más información.

Answer 5

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.

Answer 6

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 los corchetes

Answer 7

En mi caso, estaba usando la exportación predeterminada, pero no exportaba una function o React.Component , sino solo un elemento JSX , es decir

Error:

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

Trabajos :

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

Answer 8

En mi caso, fueron las metaetiquetas.

Yo estaba usando

const MetaTags = require(''react-meta-tags'');

Supongo que MetaTags es una exportación predeterminada, por lo que cambiar esto lo resolvió para mí, me llevó horas descubrir cuál era la causa.

const { MetaTags } = require(''react-meta-tags'');

Answer 9

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 .

Answer 10

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;

Answer 11

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 {

Answer 12

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 lugar de const Component = () => <div>Content</div>;

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

Answer 13

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 renderizado 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'']

Answer 14

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>
);
}

Answer 15

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.jsx y Component.scss en 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

Answer 16

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: type no es válido: se esperaba una cadena (para componentes integrados) o una clase / función (para componentes compuestos) pero se obtuvo: undefined. 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 paquete react-router-redux , 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.

Answer 17

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

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

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

Answer 18

Para mí fue que mis styled-components 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 por encima de mi definición de componente, el error desapareció.

Answer 19

Recibí este error al actualizar todas las bibliotecas a la última versión

en la versión anterior, las siguientes son importaciones

import { TabViewAnimated, TabViewPagerPan } from ''react-native-tab-view'';

pero en la nueva versión son reemplazados por los siguientes

import { TabView, PagerPan } from "react-native-tab-view";

Por lo tanto, compruebe que todas sus importaciones estén disponibles mediante el control de clic

Answer 20

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 dentro de node_modules ) desde

importar FooBarList desde ''team-ui'';

a

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

Answer 21

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

import { Link } from ''react-router-dom'' ^--------------^

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

Answer 22

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;)

Answer 23

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 myComponent depende del nombre de la exportación dentro del archivo MyComponent .

Answer 24

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

Answer 25

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

Answer 26

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 :(

Answer 27

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

Lo arregló cambiando esto:

import Splash from ''./Splash''

a esto:

import Splash from ''./Splash'';

Answer 28

necesita exportar por defecto o requiere (ruta) .default

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

Answer 29

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 utilizar la sintaxis de ES6, utilice el enlace ( import ), use babel como ayudante.

Por cierto, para que su código funcione, podemos agregar {this.props.children} en la App , como

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

Answer 30

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