Babel Storybook v6 loose warning

생성일

Dec 1, 2021 09:27 AM

태그

Babel

Storybook

Env Settings

작성자

해결 완료

문제

스토리북을 사용하는 데 있어 계속해서 babel에서 loose가 true로 설정되어야 하는데, preset-env에서는 false로 설정되어 있다는 오류가 발생했다.

해결 방법

다음과 같이 babel.config.js에서 특정 플러그인을 작성해줌으로써 경고를 제거할 수 있었다.


"plugins": [
  "@emotion/babel-plugin",     
  [
    "module-resolver", {
      "alias": {
        "@components": "./src/components",
        "@hooks": "./src/hooks"
      }
    }
  ],
  ["@babel/plugin-proposal-private-methods", { "loose": true }]
]

이제, 경고가 나지 않는다...!

하지만 실제 서버에서 오류가 발생한다.

따라서, 이를 또 확인해보니, 해당 이슈는 Storybook v6에서 발생하는 이슈라고 한다.

이에 대한 해결 방법은, .babelrc 대신 .storybook의 main.js를 조작하는 것이었다.

먼저, .babelrc에 추가했던 내용을 다시 지우고, main.js에다가 해당 코드를 작성하자.


config.module.rules[0].use[0].options.plugins[1] = [
'@babel/plugin-proposal-class-properties',
{ loose: true },
]

둘 다 오류가 발생하지 않는다.

참고자료

https://github.com/babel/babel/issues/11622