create-react-app에서 Mobx decorators 사용하기

Mobx를 공부해보려고 create-react-app으로 프로젝트를 생성했다.
예제에 있는 코드를 입력하고 build가 되길 기다렸는데 다음과 같은 에러가 발생했다.
decorator가 정상적으로 동작하지 않는것이다.

decorator는 es7에 포함되는걸로 알고 있는데 create-react-app 기본 babel 설정에 es7 문법은 포함되어 있지 않은거 같다. 그래서 검색을 해보니 다음과 같이 해주면 decorator를 사용할 수 있다는걸 알게 되었다.

eject로 프로젝트 설정을 모두 꺼낸다.

1
$ yarn run eject

babel plugin을 설치한다.

1
$ yarn add --dev babel-plugin-transform-decorators-legacy

package.json 설정을 수정한다.

아래 babel 설정 부분에

1
2
3
4
5
"babel": {
"presets": [
"react-app"
]
},

아래와 같이 추가 해준다.

1
2
3
4
5
6
7
8
"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
},

이제 정상적으로 decorators가 동작한다.

공유하기 댓글