Головна не містить експорту з назвою Home

Я працював create-react-appі стикався з цим питанням, куди потрапляю Home does not contain an export named Home.

Ось як я налаштував свій 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;

Зараз у своїй layoutsпапці я маю Home.jsфайл. який налаштовується як наступний.

import React, { Component } from 'react';

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

export default Home;

Як ви бачите, я експортую Homeкомпонент, але в моїй консолі з’являється помилка, яка говорить про це.

Що відбувається?

Помилка говорить про те, що ви імпортуєте неправильно. Код у вас зараз:

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

Неправильно, оскільки ви експортуєте як експорт за замовчуванням, а не як імпорт з ім'ям. Перевірте цей рядок:

export default Home;

Ви експортуєте за замовчуванням , а не як ім'я. Таким чином, імпортуйте Homeтак:

import Home from './layouts/Home';

Зауважте, немає фігурних дужок. Подальше читання на importі export.

Використовуйте

import Home from './layouts/Home'

а не

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

Видалити {}з дому

Це випадок, коли ви змішали експорт за замовчуванням та назвали експорт.

Що стосується namedекспорту, якщо ви намагаєтесь імпортувати їх, слід використовувати фігурні брекети, як показано нижче,

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

У вашому випадку дім експортувався як стандартний. Це імпорт, який буде імпортований з модуля, якщо ви не вкажете певне ім'я певного коду. Коли ви імпортуєте та пропускаєте фігурні фігурні дужки, він шукатиме експорт за замовчуванням у модулі, з якого ви імпортуєте. Отже, ваш імпорт повинен бути,

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

Деякі посилання:

• 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

Я щойно зіткнувся з цим повідомленням про помилку (після переходу на nextjs 9 деякі перекладені імпорти почали видавати цю помилку). Мені вдалося виправити їх за допомогою такого синтаксису:

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

Ми також можемо використовувати

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

використовуючи ключове слово для експорту перед ключовим словом.

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

За замовчуванням

 import Home from './layouts/Home'; 

Клас експорту за замовчуванням

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

В обох випадках писати не потрібно

export default Home;

після занять.

Ви можете використовувати два способи вирішити цю проблему. Перший спосіб я вважаю найкращим способом замінити імпорт сегменту вашого коду нижче.

import Home from './layouts/Home'

або експортувати ваш компонент без замовчування, який називається експортом на зразок цього

import React, { Component } from 'react';

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

export {Home};

Це рішення:

• Перейдіть у свій файл Home.js
• Переконайтеся, що ви експортуєте такий файл у кінці файлу:

export default Home;