Home ne contient pas d'exportation nommée Home

Question

Je travaillais avec create-react-app et je suis tombé sur ce problème où j'obtiens Home does not contain an export named Home .

Voici comment j'ai configuré mon App.js fichier :

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Home } from './layouts/Home'

class App extends Component {
  render() {
    return (
      <div className="App">
        Hello
        <Home />
      </div>
    )
  }
}

export default App;

Maintenant, dans mon layouts J'ai le dossier Home.js qui est configuré comme suit.

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export default Home;

Comme vous pouvez le voir, j'exporte le Home mais j'obtiens une erreur dans ma console disant ceci.

Que se passe-t-il ?

Answer 1

L'erreur vous indique que l'importation est incorrecte. Le code que vous avez maintenant :

import { Home } from './layouts/Home';

C'est incorrect parce que vous exportez en tant qu'exportation par défaut, et non en tant qu'exportation nommée. Vérifiez cette ligne :

export default Home;

Vous exportez par défaut et non comme un nom. Ainsi, l'importation Home comme ça :

import Home from './layouts/Home';

Remarquez qu'il n'y a pas d'accolades. Pour en savoir plus sur import et export .

Answer 2

Utilisez

import Home from './layouts/Home'

plutôt que

import { Home } from './layouts/Home'

Retirer {} de la maison

Answer 3

C'est un cas où vous avez mélangé par défaut les exportations et nommé les exportations.

Lorsqu'on traite avec le named Si vous essayez de les importer, vous devez utiliser des accolades comme ci-dessous,

import { Home } from './layouts/Home'; // if the Home is a named export

Dans votre cas, le foyer a été exporté comme un foyer par défaut. C'est celui qui sera importé du module, lorsque vous ne spécifiez pas un certain nom pour un certain morceau de code. Lorsque vous importez, et que vous omettez les accolades, le module recherche l'exportation par défaut dans le module d'où vous importez. Donc votre importation devrait être,

import Home from './layouts/Home'; // if the Home is a default export

Quelques références à consulter :

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export
• https://medium.com/@trekinbami/a-not-so-in-depth-explanation-of-es6-modules-import-and-export-13a80300f2f0

Answer 4

Vous pouvez utiliser deux méthodes pour résoudre ce problème, la première que je pense être la meilleure est de remplacer le segment d'importation de votre code par le suivant :

import Home from './layouts/Home'

ou exporter votre composant sans défaut ce qui est appelé named export comme ceci

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        <p className="App-intro">
          Hello Man
        </p>
        )
    }
} 

export {Home};