React-activate 사용 중 'decorators-legacy' 오류

 

문제 상황

 

개발 도중 캐시를 구현하기 위해 React-activate 라이브러리를 사용하던 도중

@withActivation 어노테이션을 추가하니

 

Support for the experimental syntax 'decorators-legacy' isn't currently enabled (33:1):

와 같은 에러가 발생하였다.

 

 

 

해결 방법

해결 한 방법은 다음과 같다.

 

1. package-json의 babel  ["@babel/plugin-proposal-decorators", { "legacy": true }] 을 추가해준다.

 

 "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      "react-hot-loader/babel", 
      ["@babel/plugin-proposal-decorators", { "legacy": true }]
    ]
  }

 

만약 바벨이 설치되어있지 않다면 아래의 명령어로 설치해주고, 안된다면 바벨 전체를 설치해야 한다.

 

 npm i @babel/plugin-proposal-decorators

 

 

나는 그래도 코드에 빨간 라인이 그어져 있었다.

 

데코레이터에 대한 실험적 지원 기능은 이후 릴리스에서 변경될 수 있습니다. 이 경고를 제거하려면 'tsconfig' 또는 'jsconfig'에서 'experimentalDecorators' 옵션을 설정합니다.

 

위와 같은 문구로 표현되어있었다.

 

2. 이를 해결하기 위해선 vsCode > 파일 > 기본 설정 > 설정으로 이동하여

Implicit Project Config:Experimental Decorators의 설정을 체크해주어야 한다.