L'utilisation de React.lazy donne le type d'élément est invalide

Question

J'ai donc isolé le problème à cette importation :

const SelectRecipients = React.lazy(() => 
    import('../components/SelectRecipients'))

Je reçois l'erreur suivante :

Le type d'élément n'est pas valide : on s'attendait à une chaîne de caractères (pour les composants intégrés) ou à une classe/fonction (pour les composants composites) mais on a obtenu : object.

J'ai pensé que c'était peut-être un problème avec le composant lui-même et j'ai essayé de créer un composant de test comme suit :

import React from 'react'
export default () => {
return(<div>Hi</div)}

et l'a ensuite importé au lieu de SelectRecipients et j'ai toujours l'erreur

CodeSandbox

Answer 1

Pour moi, le problème était d'avoir un autre index.js dans le chemin, et les codes de mon nouveau composant étaient dans index.jsx . Cela est dû au fait que le index.js a une priorité plus élevée lors de la résolution des importations.