Facts
모인 어드민에 송금을 신청한 회원의 신분증이 유효한지를 확인하는 기능을 추가했다.
webpack build 까지는 문제가 없었는데 uglify 하는 상황에서 아래처럼 error 가 뜸
Unexpected token: name «r», expected: punc «;»
Parse error at build/bundle.js:25,13407
f(null===n.parent)return e.wrapResult(n.children[0]._decode(e,t));let r,i=n.defa
^
ERROR: Unexpected token: name «r», expected: punc «;»웃긴게 webpack build 까지는 아무문제 없이 실행도 됬음
문제 원인을 추론해 보자면 webpack build 이후 추가적인 과정에서 발생했다고 생각함
찾아보니 운영환경에 올릴 때는 webpack build 후 uglifyjs 를 통해 난독화 하여 올리고 있었음
일단 문제는 uglifyjs 에서 발생한 것이라고 가정했다.
하지만 기존에는 uglifyjs 가 문제가 없었기 때문에
결국 처음 커밋부터 커밋을 변경해가며 uglify 했을 때 문제가 되는 부분을 찾앗음
문제가 되는 부분은 crypto 모듈을 사용하는 부분이었음
node module 을 사용했고 webpack 버전도 4라서 따로 설정해줄 필요도 없었는데 왜 문제가 생겼는지 궁금해서 Unexpected token: name «r», expected: punc «;» 오류 내용을 검색해보니
uglify.js 가 es6 를 지원하지 않아서 오류가 발생한다고 나옴
webpack 으로 build 할 때는 node_modules 를 exclude 하기 때문에
crypto 에서 es6 로 작성한 부분이 문제가 생긴 것이라고 판단함
문제를 해결하기 위해 uglifyjs 의 최신버전이 해당 문제를 해결했는지 확인했고
최신버전으로 update 하여 해결함
Findings
- 모든 npm package 가 es6 를 지원하지 않는다.
Feelings
- legacy code 에 새로운 package 를 추가할 때는 운영환경 까지 test 해봐야 한다.
