reactjs - script - react open graph




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 (20)

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:

  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 ____


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

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, 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, 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 {


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

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-[email protected]

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í.


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


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 .


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


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>

  )
}




react-router