Minified React error #130

리액트 개발시 문제가 없는데 product로 빌드 후 발생하는 문제

product로 빌드 했다는건 코드가 압축되고 변형되었다는 건데 컴파일된 코드 때문에 발생한 문제일 확률이 높다. 컴파일 후 발생하는 문제는 사실 디버깅하기 매우 힘들기 때문에 난감하다. 문제로 예상되는 코드들을 하나씩 제거해가며 범위를 좁히거나 다른식으로 변형에서 사용하는 방식으로 찾아내곤 하는데..

어쨌든 나의 상황은 

export const ChartRoutes = props => ( ... )

export 해준 위의 ChartRoutes 함수가 사용하는 곳에서 정의되어 있지 않은 상태로 인식하고 있었다. 변수가 아닌 function 으로 정의해주니 문제가 간단히 해결되었다. 아마 hoisting과 관련된 문제로 생각된다. 문제는 해결되었지만 더 자세한 이유를 알고자 몇가지 다른 방식으로 작성해 보았고 발견한 사항은 아래와 같다.

아래는 export 된 ChartRoutes를 사용하는 코드

import { ChartRoutes } from 'screens/Routes'
function Charts() {
  return (
    <Styled>
      <Menu />
      <ChartRoutes component={Chart} />
    </Styled>
  )
}

위와 같이 사용하면 인식하지 못했다.

import { ChartRoutes } from 'screens/Routes'
function Charts() {
  const ChartRoutesIsFine = ChartRoutes 
  return (
    <Styled>
      <Menu />
      <ChartRoutesIsFine component={Chart} />
    </Styled>
  )
}

위와 같은 코드는 괜찮다... 함수안에 작성해야 import 하는 시점을 function 실행 시점으로 컴파일 하는 듯 하다..

여하튼 Minified React error #130 에러가 발생할 경우 export 하는 코드를 변수가 아닌 function 으로 할당하여 hoisting 문제에서 벗어나는 방법도 고려해 봐야할듯 싶다.