[gatsby+typsrcipt+emotion] 오류와의 싸움

last Update - 21/03/30
에러코드 발생마다 추가할 예정 .. (프로젝트가 끝날 때 까지.. )

gatsby build 오류 발생 - 에러 95313

gatby develop 에선 돌아가는 것을 확인하고, gatby build를 돌려보니 오류가 발생한다.

Page data from page-data.json for the failed page "/main/post/": {
  "componentChunkName": "component---src-pages-main-post-index-tsx",
  "path": "/main/post/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": []
}

failed Building static HTML for pages - 3.088s

 ERROR #95313 

에러 95313 에 관련된 문제였다. 한국 관련된 사이트에서는 개츠비 관련 오류 내용에 대한 해결책을 찾을 수 없어서 .. stackoverflow에 파파고에 의존하며 질문을 올렸다.

대략적으로 요약해보자면,

gatsby develop 은 브라우저 환경에서, gatsby build는 노드 환경에서 동작하기 때문에 동작하는 환경이 다르다.
그래서 gatsby develop은 일정환 환경에서 돌아가는 것을 의미하니 gatsby build가 되어야 잘 되는 것이다..... useMemo 를 이용하기 때문에 초기 랜더링시 undefined 혹은 null 이 뜨는 것 같다고 했다.

그래서 해결 !

if ( ) 문으로 typeof를 체크해서 undefined 인지 아닌지 체크해줬다. 그래도. 문제가 계속 발생한다.
하나 고치면 하나 누수되는 상황이었다.

css만 가져오고 처음부터 오류를 찾아나가야 할지, 오류를 계속 수정해나갈 것인지 선택이 필요했다.

css 스타일만 가져오고 처음부터 오류 찾기 결정

emotion 오류 발생

마찬가지로 gatsby develop 에서는 정상적으로 작동하는 방면 gatsby build 시 발생하는 문제였다.

파일 구조

index.tsx 에서 postList Component 를 호출해서 사용하고, postList.tsx 에서 postItem Component 를 호출해서 사용한다. 각 컴포넌트의 스타일은 폴더이름.styled.ts 로 따로 빼주었다.

postItem.styled.ts 파일은 이런 구조였다.

import styled from '@emotion/styled'
import { Link } from 'gatsby'

export const PostItemWrapper = styled(Link)`
 ... css 내용 ...
`

export const InfoWrapper = styled('div')`
 ... css 내용 ...
`

export const Title = styled('h2')`
 ... css 내용 ...
`

한 개만 export 할 때는 문제가 발생하지 않았다.

import styled from '@emotion/styled'

const PostListWrapper = styled('section')`
  width: 80%;
  margin: 0 auto;
`

export default PostListWrapper

Error: Minified React error #130 #1656
비슷한 오류에 관련된 내용을 발견했지만 나같이 emotion 부분에서 발생하는 문제는 아니었다.

그냥 여기저기 주워들은 문제 발생 이유로는

1. 리액트에서 just 스타일 컴포넌트에 대한 타입을 잘 인식하지 못한다. ( 함수 혹은 class 로 인식해서 jsx가 안넘어오는 것에 대한 이슈가 발생할 수 도 있다고 한다. - 스타일인데 왜 jsx가 넘어와야하냐고요 .. 으아아악 )
2. 위의 이유에 대한 default babel 설정 문제

임시 방편 해결안

import styled from '@emotion/styled'

const PostItem = () => {
  return (
    <div>
      <ul>안녕하세요</ul>
    </div>
  )
}

const PostItemWrapper = styled('div')`
  ...css 스타일 .. 
`

const InfoWrapper = styled('div')`
  .. css 스타일 ..
`


export default PostItem

오히려 이게 더 가독성이 좋을 수 도 있겠다고 타협했다.
함수 밑 스타일에 대한 선언을 아래 해준다. (원래는 위에 해야 맞지만 jsx가 묻힐까봐 뒤에 넣었다.)