Home не содержит экспорта с именем Home

123

Я работал с 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компонент, но в консоли появляется сообщение об этом.

введите описание изображения здесь

Что происходит?

Шадид
источник

Ответы:

263

Ошибка сообщает вам, что вы импортируете неправильно. Код, который у вас есть сейчас:

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

Неправильно, потому что вы экспортируете как экспорт по умолчанию, а не как именованный экспорт. Отметьте эту строку:

export default Home;

Вы экспортируете по умолчанию , а не как имя. Таким образом, импортируйте Homeтак:

import Home from './layouts/Home';

Обратите внимание, что фигурных скобок нет. Дальнейшее чтение по importи export.

Эндрю Ли
источник
1
Или вы также можете выполнить именованный экспорт. Ex. экспорт {Дом};
Абхинав
1
@AbhinavSingi Да, но это соглашение и широко практикуется для экспорта компонента в качестве экспорта модуля по умолчанию. Плюс другого экспорта нет.
Эндрю Ли
Да, именно @AndrewLi, мы тоже следуем той же практике :)
Abhinav
Потрясающе, так что несколько будет заключено в фигурные скобки по сравнению с единичным числом, как показано здесь.
TheBlackBenzKid
2
@TheBlackBenzKid Да, если у вас несколько экспортов, используйте именованные. Затем импортируйте, используя это имя, как показано в связанной документации MDN.
Эндрю Ли
11

использование

import Home from './layouts/Home'

скорее, чем

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

Удалить {}из дома

Шекхар
источник
10
Что еще это добавляет к существующему ответу?
Эндрю Ли
4

Это случай, когда вы перепутали экспорт по умолчанию и именованный экспорт.

При работе с 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

Некоторые ссылки для просмотра:

простое число
источник
1

Я только что столкнулся с этим сообщением об ошибке (после обновления до nextjs 9 некоторые перенесенные операции импорта начали выдавать эту ошибку). Мне удалось исправить их, используя такой синтаксис:

import * as Home from './layouts/Home';
мессия
источник
1

Мы также можем использовать

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;

после школы.

Алимон Карим
источник
0

Вы можете использовать два способа решить эту проблему. Первый способ, который я считаю наилучшим, - это заменить импортируемый сегмент вашего кода на следующий:

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};
Эхсан Ахмади
источник
0

Это решение:

  • Зайдите в свой файл Home.js
  • Убедитесь, что вы экспортируете свой файл следующим образом в конец файла:
export default Home;
Игаль Ниман
источник
Это не похоже на хороший ответ, и, вероятно, его следует отвергнуть. Пожалуйста, прочтите " Как ответить", прежде чем размещать еще один ответ. Как правило, вы также не должны отвечать на старые вопросы множеством других ответов - если вы не можете добавить что-то новое, другие ответы не могут. Также включите код.
Finnmglas