Erreur de réaction : type d'élément non valide : pourquoi est-ce que j'obtiens un « objet » au lieu d'un composant ?

Erreur React : type d'élément non valide

Lors de l'utilisation de React, vous pouvez rencontrer l'erreur suivante :

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

Cause

Cette erreur se produit lorsque React attend qu'une chaîne ou une classe/fonction représente un élément, mais reçoit un objet à la place.

Solution

Dans l'exemple de code donné, l'erreur est probablement causée par l'instruction d'importation pour le composant Home dans le composant App. Le code tente d'importer le composant en tant qu'objet, alors qu'il devrait être importé en tant qu'exportation par défaut.

Pour résoudre le problème, remplacez l'instruction d'importation dans le composant App par :

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

Solutions alternatives

Une autre solution potentielle, comme mentionné dans la réponse, consiste à garantir que les instructions d'importation des composants respectent la syntaxe correcte. Par exemple, avec Webpack, la syntaxe suivante fonctionne correctement :

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

Cependant, l'utilisation de la syntaxe suivante peut entraîner l'erreur :

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!