Accueil ne contient pas d'export nommé Accueil

Je travaillais avec create-react-appet suis tombé sur ce problème là où je suis Home does not contain an export named Home.

Voici comment configurer mon App.jsfichier:

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 layoutsdossier, j'ai le Home.jsfichier. 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 Homecomposant mais j'obtiens une erreur dans ma console disant cela.

Que se passe-t-il?

L'erreur vous indique que vous importez de manière incorrecte. Le code que vous avez maintenant:

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

Est incorrect car vous exportez en tant qu'export par défaut et non en tant qu'export nommé. Vérifiez cette ligne:

export default Home;

Vous exportez par défaut , pas sous forme de nom. Ainsi, importez Homecomme ceci:

import Home from './layouts/Home';

Notez qu'il n'y a pas de parenthèses. Lectures complémentaires sur importet export.

Utilisation

import Home from './layouts/Home'

plutôt que

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

Retirer {}de la maison

Il s'agit d'un cas où vous avez mélangé les exportations par défaut et les exportations nommées .

Lorsque vous traitez les namedexportations, 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, la maison a été exportée par défaut. C'est celui qui sera importé du module, lorsque vous ne spécifiez pas un certain nom d'un certain morceau de code. Lorsque vous importez et omettez les accolades, il recherchera l'exportation par défaut dans le module à partir duquel vous importez. Donc, votre importation devrait être,

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

Quelques références à regarder:

• 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

Je viens de rencontrer ce message d'erreur (après la mise à niveau vers nextjs 9, certaines importations transpilées ont commencé à donner cette erreur). J'ai réussi à les corriger en utilisant une syntaxe comme celle-ci:

import * as Home from './layouts/Home';

Nous pouvons également utiliser

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

en utilisant le mot-clé d'exportation avant le mot-clé de classe.

export class Home extends React.Component{
    render(){
        ........
    }
}

Par défaut

 import Home from './layouts/Home'; 

Classe d'exportation par défaut

 export default class Home extends React.Component{
    render(){
        ........
    }
 }

Les deux cas n'ont pas besoin d'écrire

export default Home;

après les cours.

Vous pouvez utiliser deux façons de résoudre ce problème, la première manière que je pense que la meilleure façon est de remplacer l'importation du segment de votre code par celui ci-dessous:

import Home from './layouts/Home'

ou exportez votre composant sans défaut qui s'appelle exportation nommée comme ceci

import React, { Component } from 'react';

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

export {Home};

Voici la solution:

• Accédez à votre fichier Home.js
• Assurez-vous d'exporter votre fichier comme ceci à la fin du fichier:

export default Home;