Errore non rilevato: violazione invariante: il tipo di elemento non è valido: previsto una stringa (per i componenti incorporati) o una class / funzione, ma ottenuto: object

Sto ottenendo questo errore:

Errore non rilevato: violazione invariante: il tipo di elemento non è valido: previsto una stringa (per i componenti incorporati) o una class / funzione (per i componenti compositi) ma ottenuto: object.

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 ( 

App

  • About
) } }) var About = require('./components/Home') ReactDOM.render(( ), document.body)

il mio file Home.jsx :

 var React = require('react'); var RaisedButton = require('material-ui/lib/raised-button'); var Home = React.createClass({ render:function() { return (  ); }, }); module.exports = Home; 

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

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

vs

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

Il secondo funziona mentre il primo ha causato l’errore.

è necessario esportare il valore predefinito o richiedere (percorso) .default

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

Hai semplicemente modularizzato uno dei tuoi componenti React? Se sì, si otterrà questo errore se si è dimenticato di specificare module.exports , ad esempio:

componente / codice precedentemente non modularizzato:

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

Componente / codice modulare con module.exports :

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

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

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

Se si desidera utilizzare la syntax ES6 utilizzata dal collegamento ( import ), utilizzare babel come helper.

Per fare in modo che il tuo codice {this.props.children} , possiamo aggiungere {this.props.children} nell’app, ad esempio

 render() { return ( 

App

  • About
{this.props.children}
) }

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

import { Link } from 'react-router'

invece, potrebbe essere meglio usare

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

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

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

  /*{ oldComponent }*/ { newComponent }  

Questo è corretto:

  {/*{ oldComponent }*/} { newComponent }  

Notare le parentesi graffe

Ho lo stesso errore: ERRORE FISSATO !!!!

Io uso ‘react-router-redux’ v4 ma lei è ctriggers .. Dopo l’installazione di npm react-router-redux @ next I’m on “react-router-redux”: “^ 5.0.0-alpha.9”,

E ‘LAVORO

Nel mio caso, uno dei moduli figli esportati non restituiva un componente di reazione corretto.

const Component =

Content

; invece di const Component = () =>

Content

;

L’errore mostrato era per il genitore, quindi non poteva capire.

Non rimanere sorpreso dall’elenco di risposte per una singola domanda. Ci sono varie cause per questo problema e talvolta è facile gestire questo problema se si guarda il tuo errore due o tre volte (o finché non capisci: P).

Per il mio caso, l’avvertimento era come,

warning.js: 33 Avviso: React.createElement: type non valido – previsto una stringa (per componenti built-in) o una class / funzione (per componenti compositi) ma ottenuto: undefined. Probabilmente hai dimenticato di esportare il tuo componente dal file in cui è definito. Controlla il tuo codice su index.js: 13.

Seguito dall’errore,

invariant.js: 42 Errore non rilevato: il tipo di elemento non è valido: previsto una stringa (per i componenti incorporati) o una class / funzione (per i componenti compositi), ma ottenuto: non definito. Probabilmente hai dimenticato di esportare il tuo componente dal file in cui è definito.

Non ho potuto capire nulla dall’errore in quanto non menziona alcun metodo o nome di file. Potrei risolvere solo dopo aver visto questo avviso, menzionato sopra.

Ho la seguente riga su index.js.

  

Quando ho cercato su google l’errore sopra riportato con la parola chiave “ConnectedRouter”, ho potuto inserire la soluzione in una delle pagine di GitHub.

L’errore era dovuto al fatto che, quando installiamo il pacchetto “react-router-redux”, installeremo questo file, https://github.com/reactjs/react-router-redux ma non la libreria effettiva.

Quindi, installa il pacchetto appropriato usando

 npm install react-router-redux@next 

per risolvere questo errore.

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

Grazie.

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

Aveva un problema simile con le ultime versioni di React Native 0,50 e versioni successive.

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 voluti ore per cogliere questa sfumatura strana, difficile da notare 🙁

Un’altra ansible soluzione, che ha funzionato per me:

Attualmente, react-router-redux è in beta e npm restituisce 4.x, ma non 5.x. Ma i @types/react-router-redux restituito 5.x. Quindi c’erano variabili indefinite usate.

Forzare NPM / Yarn per usare 5.x risolto per me.

Ho ottenuto questo facendo import App from './app/'; aspettandomi di importare ./app/index.js , ma invece ha importato ./app.json .

Stavo avendo lo stesso problema e mi sono reso conto che stavo fornendo un componente di Reazione non definita nel markup JSX. Il fatto è che il componente di reazione da rendere è stato calcolato dynamicmente e alla fine è risultato indefinito!

L’errore ha dichiarato:

Violazione invariabile: il tipo di elemento non è valido: previsto una stringa (per i componenti incorporati) o una class / funzione (per i componenti compositi) ma ottenuta: non definita. Probabilmente hai dimenticato di esportare il tuo 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  } // ... } 

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

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

Avrebbe dovuto essere

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

Si noti che il nome di importazione myComponent dipende dal nome dell’esportazione all’interno del file MyComponent .

Nel mio caso, l’importazione stava accadendo implicitamente a causa di una libreria.

Sono riuscito a sistemarlo cambiando

export class Foo

a

export default class Foo .

E nel mio caso mi mancava un punto e virgola nella decodifica dell’importazione in uno dei miei moduli secondari.

Risolto modificando questo:

 import Splash from './Splash' 

a questa:

 import Splash from './Splash'; 

Nel mio caso stavo usando l’esportazione di default, ma non esportando una function o React.Component , ma solo un elemento JSX , cioè

Errore:

 export default (
Hello World!
)

Lavori :

 export default () => (
Hello World!
)

import Rating from 'src/components/Rating';

vs

import Rating from 'src/components/Rating.js';

il secondo ha funzionato per me.

Mi sono imbattuto in questo errore quando avevo un file .jsx e .scss nella stessa directory con lo stesso nome di root.

Ad esempio, se hai Component.jsx e Component.scss nella stessa cartella e provi a farlo:

import Component from ./Component

Apparentemente il Webpack si confonde e, almeno nel mio caso, cerca di importare il file scss quando voglio veramente il file .jsx.

Sono stato in grado di risolverlo rinominando il file .scss ed evitando l’ambiguità. Potrei anche aver importato in modo esplicito Component.jsx

Per me era che i miei componenti in stile erano definiti dopo la mia definizione di componente funzionale. Stava succedendo solo in scena e non localmente per me. Una volta che ho spostato i miei componenti in stile sopra la definizione del mio componente, l’errore è andato via.

Oltre ai problemi di import / export menzionati. Ho trovato usando React.cloneElement() per aggiungere props di props a un elemento figlio e quindi il rendering mi ha dato lo stesso errore.

Ho dovuto cambiare:

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

a:

 render() { ... return ( 
); }

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

Significa che alcuni dei tuoi componenti importati sono dichiarati erroneamente o inesistenti

Ho avuto un problema simile, l’ho fatto

 import { Image } from './Shared' 

ma quando ho esaminato il file condiviso non avevo un componente “Immagine” piuttosto un componente “ItemImage”

 import { ItemImage } from './Shared'; 

Questo accade quando copi il codice da altri progetti;)

@Balasubramani M mi ha salvato qui. Volevo aggiungerne un altro per aiutare le persone. Questo è il problema quando stai incollando troppe cose insieme e sei un cavaliere con le versioni. Ho aggiornato una versione di materiale-ui e ho bisogno di cambiare

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

a questa:

 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