Portfolio

🔥 문제 및 질문


{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      [
        "@babel/plugin-transform-runtime",
        {
          "corejs": 3
        }
      ], "@emotion"
    ],
  ]
}

우리가 설정했던 바벨이 제대로 작동하지 않은 것으로 보였다.

따라서 다음과 같은 가설을 세우면서 진행을 해보았다.

기존 코드에 있어서 잘못 설정한 부분이 있는가?

babel.config.js로 만들었을 때의 문제인가?

📢 해결 과정

가설 1. 기존 코드에 있어서 잘못 설정한 부분이 있는가?

일단 우리가 새롭게 하던 방식인 webpack.config.js에 import하는 방식을 하지 않아보았다.

대신에 다음과 같이, .babelrc로 만들어서 사용했다.

하지만, 여전히 오류가 떴다.

원인 탐색 결과.

stackoverflow에서 찾아본 결과, 이는 plugin에서 제대로 된 기입이 되지 않았기 때문이다.

확인 결과, 배열을 하나 더 씌워주고 있었다.

plugins property의 경우, 여러 개를 설정한다면 Array가 타입인데, 이 안에서 따로 옵션을 지정해줄 때에는 plugin 역시 [{{plugin name}}, {{ option }}]의 형태로 집어넣어줄 수 있다.

💡

즉 배열의 인자는 'plugin name'이거나, 'option을 설정한 plugin array' 여야 하는 것이다. plugins: ['plugin name', ['plugin2 name', { option }]]

현재는 이러한 괄호 기입을 잘못한 것이었다.

따라서, 다시 올바르게 수정해주었다.

`.babelrc`


{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3
      }
    ],
    "@emotion"
  ]
}

가설 2. 그렇다면 이제 `babel.config.js`로도 풀 수 있지 않을까

한 번 babel.config.js라는 파일을 만들어, 기존의 오류가 기입의 오류임을 다시 증명해야 했다.

다시 작성한다.


module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: [
    [
      "@babel/plugin-transform-runtime",
      {
        corejs: 3,
      },
    ],
    "@emotion",
  ],
};

다행히도, 잘 동작한다!

정리하자면

plugins은 Array 타입이다

plugin은 string으로 입력하나, option을 추가할 경우에는 Array 타입으로 기입한다.

이 두 가지를 잊지 말자!

📃 참고자료

https://stackoverflow.com/questions/56775030/plugins01-must-be-an-object-false-or-undefined

Plugins[0][1] must be an object, false, or undefined