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 (30)
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;
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:
-
Su archivo de exportación puede tener la palabra
default
como enexport default class ____....
Luego, su importación deberá evitar usar{}
a su alrededor. Como en laimport ____ from ____
-
Evite usar la palabra predeterminada. Entonces su exportación se parece a
export class ____...
Luego, su importación debe usar el{}
. Comoimport {____} from ____
¿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() { ...
@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'';
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.
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.
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
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>)
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'');
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
.
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;
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, 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.
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'']
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>
);
}
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
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.
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í.
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ó.
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
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'';
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
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;)
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
.
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
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
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 :(
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'';
necesita exportar por defecto o requiere (ruta) .default
var About = require(''./components/Home'').default
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>
)
}
import App from ''./app/'';
esto al
import App from ''./app/'';
esperando que importe
./app/index.js
, pero en su lugar importó
./app.json
.