Home не содержит экспорта с именем 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;