Beranda tidak berisi ekspor bernama Beranda


123

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.

masukkan deskripsi gambar di sini

Apa yang sedang terjadi?

Jawaban:


263

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.


1
Atau Anda juga bisa melakukan ekspor bernama. Ex. ekspor {Home};
Abhinav Singi

1
@AbhinavSingi Ya, tapi itu konvensi dan dipraktikkan secara luas untuk mengekspor komponen sebagai ekspor default modul. Ditambah lagi tidak ada ekspor lainnya.
Andrew Li

Ya, tepatnya @AndrewLi, kami juga mengikuti praktik yang sama :)
Abhinav Singi

Hebatnya begitu banyak akan dibungkus dengan tanda kurung keriting dibandingkan dengan tunggal seperti yang terlihat di sini.
TheBlackBenzKid

2
@TheBlackBenzKid Ya, jika Anda memiliki beberapa ekspor, gunakan yang bernama. Kemudian impor menggunakan nama itu seperti yang terlihat di dokumentasi MDN tertaut.
Andrew Li

11

Menggunakan

import Home from './layouts/Home'

daripada

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

Hapus {}dari Rumah


10
Apa lagi yang ditambahkan ini ke jawaban yang ada?
Andrew Li

4

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:


1

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';

1

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.


0

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};

0

Inilah solusinya:

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

Tampaknya ini bukan jawaban yang bagus dan mungkin sebaiknya tidak dipilih. Silakan baca Bagaimana menjawab sebelum Anda memposting jawaban lain. Umumnya, Anda juga tidak boleh menjawab pertanyaan lama dengan banyak jawaban lain - kecuali Anda dapat menambahkan sesuatu yang baru yang tidak bisa dijawab oleh jawaban lain. Sertakan juga kode.
finnmglas
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.