ReferenceError: babelHelpers is not defined

chelsea-bock-3073.jpg

babel-loader에서 왜 resolve가 안되는지 감도 안 잡히는 문제였다. 아마, 보일러플레이트의 업데이트가 늦어지면서 webpack과 babel 사이에서 버전 충돌이 나버린 것 같다. 충돌이 나는 것은 나는 것이고, 일단 돌아가지 않는 내 코드는 어떻게 고쳐야할까. 일단 내가 시도한 방법들을 보자. (즉, 바쁘다면 제일 마지막 문단을 보는 것이 좋다)

쓰려고 시도한 bootstrap-vue라는 라이브러리에서 babelHelpers에 대한 레퍼런스가 없다며 실행되기를 거부했는데, node_modules/bootstrap-vue/.babelrc 를 확인해보면 플러그인에 external-helpers가 있는 것을 확인할 수 있었다.

혹시나 하는 마음에 내 프로젝트 루트에 있는 .babelrc에도 external-helpers를 넣어봤지만 문제는 여전, babel-polyfill의 문제인가 했지만 그것도 아님, 그래서 webpack config의 babel loader에서 node_modules/bootstrap-vue를 include에 추가했지만 이것도 역시 안 먹힘.

결국, 공식 문서를 참고하여 직접 babelHelpers를 global에 주입해주는 스크립트를 생성했다. ./node_modules/.bin/babel-external-helpers -t global > ./src/utils/babel-helpers.js. 이 파일을 적당히 webpack의 entry에다가 넣든지, 아니면 App.vue와 같은 엔트리 스크립트의 윗 부분에서 import 하든지, 하나를 골라 기호에 따라서 불러주면 된다.

One thought on “ReferenceError: babelHelpers is not defined”

Leave a Reply