web-dev-qa-db-fra.com

La maison ne contient pas une exportation nommée maison

Je travaillais avec create-react-app et je suis tombé sur un problème qui m'a donné Home does not contain an export named Home.

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

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 dossier layouts, j'ai le fichier 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 constater, je suis en train d’exporter le composant Home, mais une erreur s’affiche dans ma console.

enter image description here

Que se passe-t-il?

javascriptreactjsecmascript-6create-react-app
97
Shadid

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'exportation par défaut et non en tant qu'exportation nommée. Vérifiez cette ligne:

export default Home;

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

import Home from './layouts/Home';

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

214
Li357

Utilisation

import Home from './layouts/Home'

plutôt que

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

Supprimer {} de la page d'accueil

9
Shekhar

Dans ce cas, vous avez mélangé les exportations par défaut et les exportations nommées .

Lorsque vous traitez avec les exportations named, si vous essayez de les importer, utilisez 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 le nom d’un code. Lorsque vous importez et omettez les accolades, il recherchera l’export 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:

2
prime

Vous pouvez utiliser deux méthodes pour résoudre ce problème. La première, à mon avis, consiste à remplacer le segment d'importation de votre code par le suivant:

import Home from './layouts/Home'

ou exporter 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};
0
Ehsan Ahmadi

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 réparer en utilisant une syntaxe comme celle-ci:

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