Я работал с create-response-app и столкнулся с этой проблемой, при которой я получаю сообщение об ошибке:

Домашняя страница не содержит экспорта с именем Домашняя.

Вот как я настроил свой файл App.js:

импортировать React, {Component} from 'react';
импортировать логотип из './logo.svg';
import './App.css';
импортировать {Home} из './layouts/Home'

class App extends Component {
  оказывать() {
    возвращение (
      
Привет <Главная />
) } } экспортировать приложение по умолчанию;

Теперь в моей папке layout у меня есть файл Home.js, который настроен следующим образом:

импортировать React, {Component} from 'react';

class Home расширяет Component {
  оказывать() {
    возвращение (
      

Привет мужик

) } } экспорт дома по умолчанию;

Как видите, я экспортирую компонент Home. Но в консоли появляется сообщение об ошибке:

enter image description here

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

Ответы (8)

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

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

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

export default Home;

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

import Home from './layouts/Home';

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

Это решение:

  • Заходим в свой файл Home.js
  • Убедитесь, что вы экспортируете файл следующим образом:
export default Home;

Используйте

import Home from './layouts/Home'

вместо

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

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

You can use two ways to resolve this problem, first way that i think it as best way is replace importing segment of your code with bellow one:

import Home from './layouts/Home'

или экспортируйте свой компонент без значения по умолчанию, который называется экспортным, как это

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
        

Hello Man

) } } export {Home};

поместите export {Home}; в конец файла Home.js

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

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

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

При работе с экспортом с именем, если вы попытаетесь импортировать их, вы должны использовать фигурные скобки, как показано ниже,

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

В вашем случае Дом был экспортирован по умолчанию. Это тот, который будет импортирован из модуля, если вы не укажете определенное имя для определенного фрагмента кода. Когда вы импортируете и опускаете фигурные скобки, он будет искать экспорт по умолчанию в модуле, из которого вы импортируете. Итак, ваш импорт должен быть

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

Некоторые ссылки посмотреть:

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

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;

после уроков.

2022 WebDevInsider