[babel] SyntaxError : Support for the experimental syntax 'classProperties' isn't currently enabled 에러 해결하기

0. 에러발생

npm start로 실행시 위와 같은 에러가 발생했다.

SyntaxError: /{경로}/CMS/backend/controller/hello.controller.js: Support for the experimental syntax 'classProperties' isn't currently enabled (4:15)

오류가 나는 부분의 코드는 아래와 같다.

import { HelloService } from '../service/hello.service';

export class HelloController {
  static read = async (req, res, next) => {
    const result = await HelloService.read();
    try {
      return res.status(200).json({
        success: true,
        message: 'Get Article success',
        result: result,
      });
    } catch (err) {
      console.log(err);
      next(err);
    }
  };
}

controller와 serveice등 구조를 잡기위해서 테스트로 작성했던 코드에서 발생하는 에러였고, 클래스 선언과 동시에 export 해주고 내부에 static 변수로 설정해 주는 부분에서 나는 에러였다.

---

1. 문제점 파악

다행이도 에러로그에 답이 있는 에러였다.

이전에 세팅했던 babel과 관련된 문제였고, classProperties 플러그인을 못찾는다고 친절히 알려주고 있었고, @babel/plugin-proposal-class-properties이걸 추가하라고 한다. 플러그인과 관련된 세팅은 .babel.rc파일에서 진행하므로 classProperties플러그인만 추가하면 될것 같다고 생각했다.

---

2. 해결방법 적용

기존 .babel.rc파일에 plugins를 추가하고 @babel/plugin-proposal-class-properties를 추가해줬다.

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

---

3. 결과

잘 실행된다!

---

4. eslint+prettier

이 프로젝트는 eslint와 prettier를 사용한다. 그리고 이 포스팅의 에러를 eslint+prettier를 통해 먼저 알게되었다. 해당 부분의 에러를 재현해 보려했지만 무슨 문제인지 나타나지 않아서 글로만 기록해두려 한다.

eslint가 class properties 에러를 보이고 있다면 babel-eslint패키지를 개발의존성으로 설치해주고

$ npm install babel-eslint --save-dev

기존의 eslint설정을 담고있는 .eslintrc파일로 가서 parser 부분을 babel-eslint로 바꿔주면 된다.

...
  "parser": "babel-eslint"
...