[react][solved] saga-redux, Uncaught ReferenceError: regeneratorRuntime is not defined

 

 

 

 

 

 

기존 프로젝트에 redux를 적용시키는 과정에서

아래와 같은 에러가 발생했다.

Uncaught ReferenceError: regeneratorRuntime is not defined
    at Module.<anonymous> (app~._src_store_i.568f4add7f19dcb3b32e.js:1453)
    at Module../src/store/sagas.js (app~._src_store_i.568f4add7f19dcb3b32e.js:1621)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module.<anonymous> (bootstrap:993)
    at Module../src/store/index.js (app~._src_store_i.568f4add7f19dcb3b32e.js:1055)
    at __webpack_require__ (bootstrap:853)
    at fn (bootstrap:150)
    at Module.<anonymous> (app~._src__c.568f4add7f19dcb3b32e.js:2863)
    at Module../src/_containers/App.js (app~._src__c.568f4add7f19dcb3b32e.js:3003)

 

코드를 살펴보니 redux-saga 관련한 문제로 파악이 되었다.

(redux-saga의 함수들을 사용할때 발생)

 

 

react-hot-loader를 사용하는데 redux-saga와 충돌 문제가 생겨 regerneratorRuntime을 찾을 수 없는 것 같다.

 

 

 

해결은 간단하다.

 

먼저 core-js를 설치해준다.

# yarn add core-js@3

 

그리고 .babelrc 파일을 수정한다.

 

기존의 presets에 useBuiltIns, shippedPropsals, corejs를 추가로 입력해줬다.

{
  "presets": [
    ["@babel/preset-env", { 
      "modules": false , 
      "useBuiltIns": "usage",
      "shippedProposals": true,
      "corejs": {
        "version": 3,
        "proposals": true
      }}],
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import",
    "@babel/plugin-proposal-class-properties",
    "react-hot-loader/babel"
  ]
}

 

 

실행해보면 문제없이 동작하는 걸 확인 할 수 있다.