Dans mon projet React (avec Webpack), ma structure de dossiers est la suivante:

├── myfile.js 
├── Report
    ├── index.js

Sur la base de mes recherches, je devrais pouvoir importer le module Report dans myfile.js ainsi:

import { Report } from './Report';

Mais ça ne marche pas. J'ai eu l'erreur:

Tentative d’importation: «Le rapport» n’est pas exporté depuis «./Rapport».

Mais c'est le cas.

import { Report } from './Report/index';

Mon Report/index.js a l'exportation suivante:

// export default class Report extends Component { // this was a typo
export class Report extends Component {    
  // etc
}

Comment puis-je résoudre ce problème ou au moins le dépanner?

Soit dit en passant, j'ai utilisé à l'origine l'exportation / importation par défaut, mais j'ai changé pour un nom dans l'espoir que cela ferait une différence. Ce n'est pas le cas.

Mettre à jour. Je suis vraiment désolé, mais ce message avait à l'origine et par erreur export default dans index.js. Ce n'est pas ce qui se trouve réellement dans le dossier, et cela pourrait avoir conduit certains des répondeurs sur le mauvais chemin. J'ai changé cela en export seulement lorsque j'ai changé l'importation de import Report en import { Report } comme je l'ai dit ci-dessus. L'importation et l'exportation auraient donc dû correspondre dans les deux cas (nommés ou par défaut), et aucun n'a fonctionné.

6
bongbang 20 nov. 2018 à 03:55

4 réponses

Meilleure réponse

SOLUTION: Redémarrez le serveur de développement.


EXPLICATION

Je l'ai compris un peu. Bref, tout ce que j'avais à faire était de redémarrer le serveur de développement.

Détails pour les curieux. Avant de décider de faire de Report un dossier, c'était un fichier dans le même dossier que myfile.js.

├── myfile.js 
├── Report.js

J'avais un serveur de développement fonctionnant localement, et tout fonctionnait très bien.

Ensuite, j'ai créé un nouveau dossier Report et y ai déplacé Report.js en utilisant git mv Report.js Report/index.js pendant que le serveur de développement était toujours en cours d'exécution et qu'il a cessé de fonctionner.

Je ne sais pas pourquoi cela n'a pas fonctionné exactement (je semble me souvenir d'un message d'erreur différent de celui extrait dans mon message), mais je pensais que mon exportation par défaut était le problème et j'ai décidé de le changer.

Le serveur de développement a bien sûr reconnu les modifications que j'ai apportées aux fichiers, mais apparemment, il pensait toujours que le Report.js supprimé existait toujours, que ce soit en tant que fichier vierge ou ancienne version ou autre. Avec import { Report } from './Report';, il allait chercher ou essayer de récupérer l'ancien Report.js et échouait, alors qu'avec import { Report } from './Report/index';, il savait exactement où aller et fonctionnait comme prévu.

Une fois redémarré, le serveur ne voit plus le Report.js fantasmatique et recherche donc Report/index.js ensuite, comme il est censé le faire. Tout fonctionne maintenant, y compris l'export / import par défaut d'origine.

8
Nguyen You 20 nov. 2018 à 05:36

Puisque votre nom de fichier est index.js, ces deux lignes sont équivalentes:

import { Report } from './Report';  // by default, the module system will look for the index.js file inside a folder
import { Report } from './Report/index';

Par conséquent, il n'y a aucune raison pour que la deuxième approche fonctionne, mais pas la première


Dans votre cas, parce que vous utilisez le default export plutôt que named export, afin d'utiliser le module exporté, ces deux méthodes fonctionneront pour vous:

import Report from './Report'
import Report from './Report/index';

MISE À JOUR

Tentative d’importation: «Le rapport» n’est pas exporté depuis «./Rapport».

Cette erreur nous indique que nous essayons de import un module named export mais que le système de modules ne trouve aucun module named export portant le nom Report. C'est évident parce que nous utilisons default export plutôt que named export.


MISE À JOUR

Il s'agit d'une démonstration de travail: https://codesandbox.io/s/m7vp982m2p Vous pouvez l'utiliser comme référence, puis en regardant votre code et vous comprendrez pourquoi votre code ne fonctionne pas.

2
Nguyen You 20 nov. 2018 à 03:45

Si vous venez de restructurer votre application pour utiliser index.js, vous devrez redémarrer le nœud pour qu'il fonctionne.

0
Mike Thomson 15 déc. 2019 à 00:19

Il semble que vous n'exportiez pas réellement un objet de votre classe, ce qui signifie que vous n'avez pas besoin des accolades comme ceci:

import { Report } from './Report';

Comme l'a dit Austin Greco, vous devez supprimer les accolades, car vous n'exportez qu'une seule chose, qui est le rapport de classe.

import Report from './Report';
2
oriont 20 nov. 2018 à 01:20