Beranda tidak berisi ekspor bernama Beranda

Saya bekerja dengan create-react-appdan menemukan masalah ini di mana saya dapatkan Home does not contain an export named Home.

Inilah cara saya menyiapkan App.jsfile saya :

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;

Sekarang di layoutsfolder saya, saya memiliki Home.jsfile. yang diatur seperti berikut.

import React, { Component } from 'react';

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

export default Home;

Seperti yang Anda lihat, saya mengekspor Homekomponen tetapi saya mendapatkan kesalahan di konsol saya yang mengatakan ini.

Apa yang sedang terjadi?

Kesalahan memberi tahu Anda bahwa Anda mengimpor dengan tidak benar. Kode yang Anda miliki sekarang:

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

Salah karena Anda mengekspor sebagai ekspor default, bukan sebagai ekspor bernama. Periksa baris ini:

export default Home;

Anda mengekspor sebagai default , bukan sebagai nama. Jadi, impor Homeseperti ini:

import Home from './layouts/Home';

Perhatikan bahwa tidak ada tanda kurung kurawal. Bacaan lebih lanjut tentang importdan export.

Menggunakan

import Home from './layouts/Home'

daripada

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

Hapus {}dari Rumah

Ini adalah kasus di mana Anda mencampur ekspor default dan ekspor bernama .

Saat menangani namedekspor, jika Anda mencoba mengimpornya, Anda harus menggunakan tanda kurung kurawal seperti di bawah ini,

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

Dalam kasus Anda, Rumah diekspor sebagai default. Ini adalah salah satu yang akan diimpor dari modul, ketika Anda tidak menentukan nama tertentu dari bagian kode tertentu. Saat Anda mengimpor, dan menghilangkan tanda kurung kurawal, itu akan mencari ekspor default di modul tempat Anda mengimpor. Jadi impor Anda harus,

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

Beberapa referensi untuk dilihat:

• 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

Saya baru saja menemukan pesan kesalahan ini (setelah memutakhirkan ke nextjs 9 beberapa impor yang transparan mulai memberikan kesalahan ini). Saya berhasil memperbaikinya menggunakan sintaks seperti ini:

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

Kami juga bisa menggunakan

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

menggunakan kata kunci ekspor sebelum kata kunci kelas.

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

Sebagai default

 import Home from './layouts/Home'; 

Kelas ekspor default

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

Kedua kasus tidak perlu ditulis

export default Home;

setelah kelas.

Anda dapat menggunakan dua cara untuk mengatasi masalah ini, cara pertama yang menurut saya terbaik adalah mengganti segmen impor kode Anda dengan yang di bawah ini:

import Home from './layouts/Home'

atau ekspor komponen Anda tanpa default yang disebut ekspor bernama seperti ini

import React, { Component } from 'react';

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

export {Home};

Inilah solusinya:

• Buka file Anda Home.js
• Pastikan Anda mengekspor file Anda seperti ini di akhir file:

export default Home;