🖥️ 컴포넌트 섀도잉(Component Shadowing)

Gatsby에 Flexiblog 테마를 다운받고 커스텀하던 중 위와 같은 오류가 발생하였습니다. 해당 오류는 메인 페이지의 Hero 영역을 Component Shadowing(컴포넌트 섀도잉) 하는 중에 나타난 오류입니다. 

warning  Assign arrow function to a variable before exporting as moduledefault
import/no-anonymous-default-export

🤦🏻‍♀️ 오류 해결

1. 섀도잉 파일 편집

섀도잉 한 경로에 있는 Hero.Content.jsx의 문제이므로 해당 파일에 접근한 뒤 export로 시작하는 코드를 확인합니다.

flexiblog 테마의 경우 정상적으로 섀도잉했다면 파일은 site\src\@elegantstack\gatsby-theme-flexiblog-personal\components\Hero\Hero.Content.jsx 와 같은 경로에 있습니다.

export default () => (
  <>
    <Heading variant='h1'>
      Hi, I'm <Text sx={styles.author}>Jamie</Text>.
    </Heading>
    <Heading variant='h1' sx={styles.occupation}>
      Junior Developer
    </Heading>
    <Heading variant='h3' sx={styles.specialty}>
      코드를 기록합니다.
    </Heading>
    <Box variant='buttons.group'>
      <Button as={Link} to='/contact'>
        Contact Me
      </Button>
      <Button variant='white' as={Link} to='/about'>
        About Me
      </Button>
    </Box>
  </>
)

2. 변수에 개체를 우선적으로 할당

위 코드를 아래와 같이 수정합니다.

const HeroEdit = () => (
  <>
    <Heading variant='h1'>
      Hi, I'm <Text sx={styles.author}>Jamie</Text>.
    </Heading>
    <Heading variant='h1' sx={styles.occupation}>
      Junior Developer
    </Heading>
    <Heading variant='h3' sx={styles.specialty}>
      코드를 기록합니다.
    </Heading>
    <Box variant='buttons.group'>
      <Button as={Link} to='/contact'>
        Contact Me
      </Button>
      <Button variant='white' as={Link} to='/about'>
        About Me
      </Button>
    </Box>
  </>
);
export default HeroEdit;

위와 같이 새로운 변수 HeroEdit를 만들어 개체를 할당합니다.

🙆🏻‍♀️ 해결 완료

export default () => ( 을 const HeroEdit = () => 으로 변경해주고 코드 마지막 부분에 export default HeroEdit; 줄을 추가해 주면 파일이 문제 없이 컴포넌트 섀도잉(Component Shadowing) 된 뒤 정상 동작합니다.

warning Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export