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;