[ERROR] React: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.


이번에 한번 프로젝트를 create-react-app 으로 시작해서 진행해볼까.. 하고 시작하는데 갑자기 날 멘붕하게 한 이 에러 메시지.

Uncaught Invariant Violation: Minified React error #130; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

React: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

정말 이상했던게 development env 에서는 아무 문제도 없는데, production env 에서만 저 오류가 발생했다.

 

우선, 나의 프로젝트 구조는 다음 gist 링크에 나와있다:

gist 링크: https://gist.github.com/velopert/ab6e132d73a17930c90e3e38493c12ed

 

평상시에 React 프로젝트 작업 할 때 처럼, containers 디렉토리에 컨테이너 컴포넌트들 넣고,
index.js 로 내부에있는 모든 컴포넌트 불러와서 export { App, UserProfile } 이런식으로 내보내고,
나중에 다른곳에서 import { UserProfile } from 'containers' 이런식으로 불러왔는데,
우선, React 프로젝트의 entry 포인트인 index.js 에선 컴포넌트를 로딩하고 렌더링하는데에는 아무 문제가 없었으나,
그 디렉토리 내부에서 import UserProfile from './UserProfile' 이런식으로 불러오는건 오류가 없었지만,
import { UserProfile } from 'containers' 이런식으로 불러오면,
렌더링할때 오류가 발생했다.
그리고 또 이해가 가지 않았던 부분은 dev server 에서는 제대로 작동하는데, production 일때만 저 오류가 발생한다는점..

뭐 때문에 이런 오류가 발생하는건지 한참 삽질하다가 결국 webpack dev config 랑 prod config랑 일일히 비교해보니
플러그인이나 모듈부분엔 큰 문제가 없었고 babel 의 설정의 차이 때문에 그랬다. 차이는 한 줄.

36번 줄을 지워주면, 언제 그런 오류 있었냐는듯이 해결이 된다.

babel-plugin-transform-react-constant-elements가 문제가 되는건데.. 상수형태로된 element는 변할일이 없어서 나중에 비교하지 않음으로서 성능을 최적화를 한다는데….. 지금 내가 겪고있는 오류랑 무슨 상관이 있는걸까? 이게 없으면 제대로 작동하는데, 이게 있으면 오류가 발생하니, 이 플러그인만의 버그인 것 같다.

내가 직접 코드 수정해서 오픈소스 프로젝트에 기여를 해볼까.. 했지만, 어떻게 수정해야할지 몰라서, 난 그냥 이 플러그인을 비활성화하기로 했다.

일단은 create-react-app 에 issue를 넣었다 🙁 이거때문에 오늘 시간을 너무 많이 낭비했어 ㅋㅋ

 

결과: https://github.com/facebookincubator/create-react-app/issues/525

내가 고칠 줄 몰라서 이슈 넣었더니 gaearon 은 슬픈 이모티콘을 작성하며 해당 플러그인을 create-react-app 에서 뺐다.

나중에 고쳐지면 다시 추가될듯 하다.