Errore non rilevato: violazione invariante: il tipo di elemento non è valido: prevista una stringa (per componenti incorporati) o una classe / funzione ma ottenuto: oggetto

Ricevo questo errore:

Errore non rilevato: violazione invariante: il tipo di elemento non è valido: prevista una stringa (per componenti incorporati) o una classe / funzione (per componenti compositi) ma ottenuto: oggetto.

Questo è il mio codice:

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)

Il mio Home.jsxfile:

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;

Nel mio caso ( usando Webpack ) c'era la differenza tra:

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

vs

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

Il secondo funziona mentre il primo causa l'errore. O il contrario.

hai bisogno di esportazione predefinita o richiedi (percorso) .default

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

Hai appena modularizzato qualcuno dei tuoi componenti React? Se sì, otterrai questo errore se ti sei dimenticato di specificare module.exports , ad esempio:

componente / codice non modulare precedentemente valido:

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

componente / codice modulare con module.exports :

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

Se ricevi questo errore, potrebbe essere perché stai importando il link usando

import { Link } from 'react-router'

invece, potrebbe essere meglio usare

importare {Link} da ' reazioni-router-dom '
                      ^ -------------- ^

Credo che questo sia un requisito per la versione 4 del router di reazione

https://github.com/rackt/react-router/blob/e7c6f3d848e55dda11595447928e843d39bed0eb/examples/query-params/app.js#L4 Router è anche una delle proprietà di react-router. Quindi cambia i tuoi moduli richiede un codice del genere:

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

Se vuoi usare la sintassi ES6 usa il link use ( import), usa babel come aiuto.

A proposito, per rendere il vostro opere di codice, possiamo aggiungere {this.props.children}in App, come

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

  )
}

Non rimanere sorpreso dall'elenco di risposte per una singola domanda. Esistono varie cause per questo problema;

Nel mio caso, l'avvertimento è stato

warning.js: 33 Avvertenza: React.createElement: tipo non valido - prevista una stringa (per componenti incorporati) o una classe / funzione (per componenti compositi) ma ottenuta: indefinita. Probabilmente hai dimenticato di esportare il componente dal file in cui è definito. Controlla il codice su index.js: 13.

Seguito dall'errore

invariant.js: 42 Errore non rilevato: il tipo di elemento non è valido: prevista una stringa (per componenti incorporati) o una classe / funzione (per componenti compositi) ma ottenuta: non definita. Probabilmente hai dimenticato di esportare il componente dal file in cui è definito.

Non riuscivo a capire l'errore poiché non menziona alcun metodo o nome di file. Sono stato in grado di risolvere solo dopo aver visto questo avviso, menzionato sopra.

Ho la seguente riga su index.js.

<ConnectedRouter history={history}>

Quando ho cercato su Google l'errore sopra riportato con la parola chiave "ConnectedRouter" ho trovato la soluzione in una pagina GitHub.

L'errore è perché, quando installiamo il react-router-reduxpacchetto, per impostazione predefinita installiamo questo. https://github.com/reactjs/react-router-redux ma non la libreria attuale.

Per risolvere questo errore, installare il pacchetto corretto specificando l'ambito npm con @

npm install react-router-redux@next

Non è necessario rimuovere il pacchetto installato in modo errato. Verrà sovrascritto automaticamente.

Grazie.

PS: anche l' avvertimento ti aiuta. Non trascurare l' avvertimento solo guardando l' errore da solo.

Nel mio caso, uno dei moduli figlio esportati non restituiva un componente di reazione adeguato.

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

invece di

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

L'errore mostrato era per il genitore, quindi non è stato possibile capirlo.

Nel mio caso, ciò è stato causato da simboli di commento errati. Questo è sbagliato:

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

Questo è corretto:

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

Notare le parentesi graffe

Ho lo stesso errore: ERROR FIX !!!!

Io uso "reagire-router-redux" v4, ma lei è cattiva. Dopo npm installo reagire-router-redux @ dopo sono su "reagire-router-redux": "^ 5.0.0-alpha.9",

E FUNZIONA

L'ho ottenuto import App from './app/';aspettandomi di importarlo ./app/index.js, ma invece è stato importato ./app.json.

Stavo riscontrando lo stesso problema e mi sono reso conto che stavo fornendo un componente Undefined React nel markup JSX. Il fatto è che il componente di reazione da renderizzare è stato calcolato dinamicamente e alla fine non è stato definito!

L'errore ha dichiarato:

Violazione invariante: il tipo di elemento non è valido: prevista una stringa (per componenti incorporati) o una classe / funzione (per componenti compositi) ma ottenuta: non definita. Probabilmente hai dimenticato di esportare il componente dal file in cui è definito. Controlla il metodo di rendering di C.,

L'esempio che produce questo errore:

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

Il problema era che veniva fornito un "uiType" non valido e quindi questo stava producendo come risultato non definito:

templates['InvalidString']

Proprio come una rapida aggiunta a questo. Stavo avendo lo stesso problema e mentre Webpack stava compilando i miei test e l'applicazione funzionava bene. Quando stavo importando il mio componente nel file di test stavo usando il caso errato su una delle importazioni e questo causava lo stesso errore.

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

Avrebbe dovuto essere

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

Si noti che il nome dell'importazione myComponentdipende dal nome dell'esportazione all'interno del MyComponentfile.

Aveva un problema simile con le ultime versioni di React Native da 0,50 in poi.

Per me è stata una differenza tra:

import App from './app'

e

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

(quest'ultimo ha risolto il problema). Mi ci sono volute ore per cogliere questa sfumatura strana, difficile da notare :(

Un'altra possibile soluzione, che ha funzionato per me:

Attualmente, react-router-reduxè in beta e npm restituisce 4.x, ma non 5.x. Ma il @types/react-router-redux5.x. restituito Quindi sono state utilizzate variabili non definite.

Forzare NPM / Filati a usare 5.x lo ha risolto per me.

Dato il tuo errore di:

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

Hai 2 opzioni:

1. Il tuo file di esportazione può avere la parola defaultcome in export default class ____.... Quindi la tua importazione dovrà evitare di usarla {}intorno. Come inimport ____ from ____

2. Evita di usare la parola predefinita. Quindi la tua esportazione sembra export class ____... Quindi la tua importazione deve usare il {}. Piaceimport {____} from ____

Nel mio caso, l'importazione stava avvenendo implicitamente a causa di una libreria.

Sono riuscito a risolverlo cambiando

export class Foo

per

export default class Foo.

Ho riscontrato questo errore quando avevo un file .jsx e .scss nella stessa directory con lo stesso nome root.

Quindi, ad esempio, se hai Component.jsxe Component.scssnella stessa cartella e provi a farlo:

import Component from ./Component

Apparentemente Webpack viene confuso e, almeno nel mio caso, cerca di importare il file scss quando voglio davvero il file .jsx.

Sono stato in grado di risolverlo rinominando il file .scss ed evitando l'ambiguità. Avrei potuto anche importare esplicitamente Component.jsx

E nel mio caso mi mancava solo un punto e virgola all'importazione-declerazione in uno dei miei moduli secondari.

Risolto il problema cambiando questo:

import Splash from './Splash'

a questo:

import Splash from './Splash';

Nel mio caso stavo usando l'esportazione predefinita, ma non esportando un functiono React.Component, ma solo un JSXelemento, ad es

Errore:

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

Lavori :

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

Oltre a import/ exportproblemi menzionati. Ho scoperto che usare React.cloneElement()per aggiungere propsun elemento figlio e quindi renderlo mi ha dato lo stesso errore.

Ho dovuto cambiare:

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

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

per:

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

Vedi i React.cloneElement() documenti per maggiori informazioni.

Ho riscontrato questo errore nel reagire al routing, il problema era che stavo usando

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

ma era rotta sbagliata richiede componente come classe / funzione, quindi l'ho cambiato

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

e ha funzionato. (Basta evitare le parentesi graffe attorno al componente)

Per me è stato che i miei componenti di stile sono stati definiti dopo la mia definizione di componente funzionale. Stava succedendo solo nella messa in scena e non localmente per me. Dopo aver spostato i componenti con lo stile sopra la definizione del componente, l'errore è scomparso.

Ciò significa che alcuni dei componenti importati vengono dichiarati erroneamente o inesistenti

Ho avuto un problema simile, l'ho fatto

import { Image } from './Shared'

ma quando ho guardato nel file condiviso non avevo un componente 'Immagine' piuttosto un componente 'ItemImage'

import { ItemImage } from './Shared';

Questo succede quando copi il codice da altri progetti;)

Ho avuto un problema con React.Fragment, perché la versione della mia reazione era < 16.2, quindi me ne sono liberata.

@Balasubramani M mi ha salvato qui. Volevo aggiungerne uno in più per aiutare le persone. Questo è il problema quando si incollano troppe cose insieme e si è sprezzanti con le versioni. Ho aggiornato una versione di material-ui e devo cambiarla

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

a questo:

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

Ho avuto lo stesso problema e il problema era che alcuni file js non erano inclusi nel raggruppamento di quella pagina specifica. Prova a includere quei file e il problema potrebbe essere risolto. L'ho fatto:

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

e ha risolto il problema per me.

Questo mentre stavo usando React in Dot NEt MVC

Ho scoperto un altro motivo per questo errore. Ha a che fare con il CSS-in-JS che restituisce un valore null al JSX di livello superiore della funzione di ritorno in un componente React.

Per esempio:

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

Vorrei ricevere questo avviso:

Avvertenza: React.createElement: tipo non valido - prevista una stringa (per componenti incorporati) o una classe / funzione (per componenti compositi) ma ottenuta: null.

Seguito da questo errore:

Errore non rilevato: il tipo di elemento non è valido: prevista una stringa (per componenti incorporati) o una classe / funzione (per componenti compositi) ma ottenuta: null.

Ho scoperto che era perché non avevo CSS con il componente CSS-in-JS che stavo cercando di renderizzare. L'ho risolto assicurandomi che fosse restituito CSS e non un valore nullo.

Per esempio:

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

Ricevo quasi lo stesso errore:

Uncaught (promessa) Errore: il tipo di elemento non è valido: prevista una stringa (per componenti incorporati) o una classe / funzione (per componenti compositi) ma ottenuto: oggetto.

Stavo cercando di importare un componente funzionale puro da un'altra libreria di nodi sviluppata dal mio team. Per risolverlo, ho dovuto passare a un'importazione assoluta (facendo riferimento al percorso all'interno del componente node_modules) da

importare FooBarList da 'team-ui';

per

importare FooBarList da 'team-ui / lib / components / foo-bar-list / FooBarList';

Nel mio caso è finito per essere il componente esterno importato in questo modo:

import React, { Component } from 'react';

e poi dichiarato come:

export default class MyOuterComponent extends Component {

dove un componente interno ha importato il React nudo:

import React from 'react';

e punteggiato in esso per la dichiarazione:

export default class MyInnerComponent extends ReactComponent {

Nel mio caso, mi ci è voluto un sacco di tempo per cercare e verificare i modi possibili, ma risolti solo in questo modo: rimuovere "{", "}" quando si importa un componente personalizzato:

import OrderDetail from './orderDetail';

Il mio modo sbagliato era:

import { OrderDetail } from './orderDetail';

Perché nel file orderDetail.js, ho esportato OrderDetail come classe predefinita:

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

export default OrderDetail;