[프론트엔드] React-MoBx 오류 Support for the experimental syntax 'decorators-legacy' isn't currently enabled

 

1. 문제 원인 

 

 

react-mobx 프로젝트를 추가하는 과정에서 발생한 오류를 정리해놓는다.

 

react function 프로젝트에서 class 프로젝트로 mobx를 적용해야 하는과정에서 발생한 오류이다.

 

 

"@observer"

 

 

클래스에서는 위와 같이 선언을 해야 oberser 선언이 가능하여 적용하려고 하니. decorator 에러가 발생했다.

 

Support for the experimental syntax 'decorators-legacy' isn't currently enabled

 

 

2. 문제 해결방법

 

 

먼저 아래의 decorators 라이브러리를 mpm, yarn 명령어로 설치한다.

 

 npm i @babel/plugin-proposal-decorators

 

 

- package.json 

 

해당 파일에 아래의 plugins 설정을 추가 적용한다.

 

마지막으로 실행중인 프로젝트를 닫고 다시 시작하여 오류를 해결했다.

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