[오류 해결 완료]웹팩 빌드를 하니 빈화면이 나오고 오류가 발생하는 일이 있습니다.

React
1

안녕하세요? 구현이라고 합니다.
웹팩 빌드를 하다가 계속해서 이상한 현상이 발견되는데 이유를 파악하기가 좀 어려워 검색해 보니 웹팩 버전 문제가 있다 이렇게 씌여 있기는 합니다.
참고


그리고 제가 직접적으로 찾은 문제로는 $ npm run dev 와 $ npm run build 이후 어느 순간에 static/frontend/main.js 파일의 코드 내용이 바뀌는 것이 보이고 장고(서버)를 재작동 시키면 빈화면으로 나오게 됩니다.
우선 파악에 도움이 될 만한 정보를 올립니다.
package.json
image
main.js
https://raw.githubusercontent.com/bradtraversy/lead_manager_react_django/master/leadmanager/frontend/static/frontend/main.js

현재는 임시적인 문제 해결 방법으로 위의 깃헙 링크로 들어가 main.js 코드만 따로 복사해 붙여넣는데 스스로 생각해도 너무 이상하다 여려겨집니다. 혹시 이 문제를 해결하신 분이 계신가요…?

2

해결하였습니다.
크롬 개발자모드에서 발견한 오류 경위는 다음과 같습니다.
image
위와 같이 displayName 에 대한 내용이더군요.
그리고 검색 결과 리액트의 버전이 업그레이드 되면서 발생한 문제라고 알게 되었습니다.

그래서 정상작동에 성공할때의 상태 그대로가 담긴 package.json 의 내용을 참고해 설치를 해야 겠더군요.
npm install… 안녕… 잠시 편리함은 버려야겠네요…

image

이상입니다.

3

위와 같은 방법으로 해 보니 음… 아니더라구요… 다시 생각해보니 어차피 패키지 락으로 묶여있는 데로 설치가 될텐데… 하다가

뭔가 빼먹은 기분이 들어서 장고 녹스문제인가…? 그걸 설치 안했나…? 하다가 해결책을 찾았습니다.

블로그에 정리한 내용 그대로를 가져옵니다.

Django knox 등을 설치하지 않으니 이런 문제가 발생하더군요.
npm install말고도 따로 설치해야 할 목록을 미리 써 봅니다.

가상환경에선…
$ pipenv install django djangorestframework django-rest-knox

실제 환경에선
$ pip3 install django djangorestframework django-rest-knox

혹시 모르니 웹팩쪽도 다시 설치 궈궈
$ npm init -y
$ npm i -D webpack webpack-cli
$ npm i -D @babel/core babel-loader @babel/preset-env @babel/preset-react babel-plugin-transform-class-properties
$ npm i react react-dom prop-types

여기까지 다시 해 주니까 오류가 해결되네욤

1개의 좋아요
4

오늘 새벽 6시에 완벽하게 오류를 잡아냈습니다.
Alerts.js 로 알람 기능을 하는 앱의 dependencies가 서로 맞지가 않은 상태에서 코드를 수정해줬던 것 입니다.

포스팅 4.1 에서 발견한 오류를 정리하였습니다.

오류 발견_ Alerts.js … 2019.06.13
빌드를 하다가 문제가 계속 발생했습니다.
Alerts.js의 가장 아랫부분입니다.
export default connect(mapStateToProps)(withAlert()(Alerts));

react-alert의 버전이 4.0.4 에선 다음과 같은 코드로 작동합니다.
export default connect(mapStateToProps)(withAlert(Alerts));

But, 버전이 5.5.0 오르고 난 뒤엔 달라졌습니다.
Link1: https://codesandbox.io/s/l2mo430lzq
Link2: https://github.com/schiehll/react-alert/blob/master/package.json
Link3: https://github.com/reduxjs/react-redux/blob/master/src/connect/connect.js
Link4: https://www.vobour.com/리액트-react-버전-16-총정리

그에 따라 dependencies 가 달라졌습니다.

새로 설치한 dependencies

$ npm i [email protected]
$ npm i [email protected]
$ npm i [email protected]

그리고
$ npm run build
$ python3 manage.py runserver

를 하니 정상적으로 작동합니다.

1개의 좋아요