Home non contiene un'esportazione denominata Home

Stavo lavorando create-react-appe mi sono imbattuto in questo problema in cui ottengo Home does not contain an export named Home.

Ecco come imposto il mio App.jsfile:

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;

Ora nella mia layoutscartella ho il Home.jsfile. che è impostato come segue.

import React, { Component } from 'react';

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

export default Home;

Come puoi vedere, sto esportando il Homecomponente ma ricevo un errore nella mia console che lo dice.

Cosa sta succedendo?

L'errore ti dice che stai importando in modo errato. Il codice che hai ora:

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

Non è corretto perché stai esportando come esportazione predefinita, non come esportazione con nome. Controlla questa riga:

export default Home;

Stai esportando come impostazione predefinita , non come nome. Quindi, importa in Homequesto modo:

import Home from './layouts/Home';

Notare che non ci sono parentesi graffe. Ulteriori letture su importe export.

Uso

import Home from './layouts/Home'

piuttosto che

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

Rimuovi {}da Home

Questo è un caso in cui hai mescolato esportazioni predefinite ed esportazioni con nome .

Quando si tratta delle namedesportazioni, se si tenta di importarle è necessario utilizzare le parentesi graffe come di seguito,

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

Nel tuo caso la Home è stata esportata come predefinita. Questo è quello che verrà importato dal modulo, quando non specifichi un certo nome di un certo pezzo di codice. Quando importi e ometti le parentesi graffe, cercherà l'esportazione predefinita nel modulo da cui stai importando. Quindi la tua importazione dovrebbe essere,

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

Alcuni riferimenti da guardare:

• 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

Mi sono appena imbattuto in questo messaggio di errore (dopo l'aggiornamento a nextjs 9 alcune importazioni transpilate hanno iniziato a dare questo errore). Sono riuscito a risolverli usando una sintassi come questa:

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

Possiamo anche usare

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

utilizzando la parola chiave di esportazione prima della parola chiave della classe.

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

Per impostazione predefinita

 import Home from './layouts/Home'; 

Classe di esportazione predefinita

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

Entrambi i casi non hanno bisogno di scrivere

export default Home;

dopo la lezione.

Puoi utilizzare due modi per risolvere questo problema, il primo che lo ritengo il modo migliore è sostituire il segmento di importazione del tuo codice con quello seguente:

import Home from './layouts/Home'

o esporta il tuo componente senza impostazione predefinita che si chiama export denominato in questo modo

import React, { Component } from 'react';

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

export {Home};

Questa è la soluzione:

• Vai al tuo file Home.js
• Assicurati di esportare il file in questo modo alla fine del file:

export default Home;