[React] Parsing error: Cannot find module '@babel/plugin-proposal-private-property-in-object' 오류 해결

plugins 의존성 이슈

webpack파일을 들어가보니 저렇게 오류가 있었다.
(const에 뜬 오류가 아니고, 전반적인 오류라서 저렇게 표시됐음)
오류메시지를 보니, babel plugin 관련 오류였다

Parsing error: Cannot find module '@babel/plugin-proposal-private-property-in-object'

Require stack:

- C:\Users\CSI\Desktop\PES-FE\node_modules\@babel\core\lib\config\files\plugins.js
- C:\Users\CSI\Desktop\PES-FE\node_modules\@babel\core\lib\config\files\index.js
- C:\Users\CSI\Desktop\PES-FE\node_modules\@babel\core\lib\index.js
- C:\Users\CSI\Desktop\PES-FE\node_modules\@babel\eslint-parser\lib\worker\babel-core.cjs
- C:\Users\CSI\Desktop\PES-FE\node_modules\@babel\eslint-parser\lib\worker\handle-message.cjs
- C:\Users\CSI\Desktop\PES-FE\node_modules\@babel\eslint-parser\lib\client.cjs
- C:\Users\CSI\Desktop\PES-FE\node_modules\@babel\eslint-parser\lib\index.cjs
- C:\Users\CSI\Desktop\PES-FE\node_modules\@eslint\eslintrc\dist\eslintrc.cjs
- Did you mean "@babel/plugin-transform-private-property-in-object"?

Make sure that all the Babel plugins and presets you are using

are defined as dependencies or devDependencies in your package.json

file. It's possible that the missing plugin is loaded by a preset

you are using that forgot to add the plugin to its dependencies: you

can workaround this problem by explicitly adding the missing package

to your top-level package.json.eslint

@babel/plugin-proposal-private-property-in-object와 관련된 Babel 플러그인을 찾지 못해 발생하는 오류라는데... 분명히 babel.config.json 파일에 해당 플러그인을 추가해놨단 말이지? 왜 찾지 못하는걸까?

이슈 해결

알고보니,

@babel/plugin-transform-private-property-in-object와
@babel/plugin-proposal-private-property-in-object
이 두가지가 함께 있었고, 충돌이 일어났던 것이다.

두 플러그인은 같은 기능을 제공하는데, 현재 표준에서는 transform이 적합하다고 했다! 그래서 proposal을 제거할것이다.

npm uninstall @babel/plugin-proposal-private-property-in-object

근데 삭제를 했는데도, 오류는 그대로였으며 package-lock.json에 해당 패키지가 그대로 있었다..
패키지 의존성을 살펴보니 엮인게 많았다.

└─┬ eslint-config-react-app@7.0.1
  └─┬ babel-preset-react-app@10.0.1
    └─┬ @babel/preset-env@7.25.4
      └── @babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2

eslint-config-react-app에 의존하고 있으므로 이것을 제거해줄것이다.
그렇게 되면, ESLint와 Babel 설정을 수동으로 관리해야한다.

하지만 난 ESLint를 설치해놓고 추가적인 파일로 관리를 해주지 않았고(ㅎㅎ) babel.config.json에서 플러그인을 직접 관리하고 있었기에 제거해도 상관 없었다.

npm uninstall eslint-config-react-app

제거 후 오류는 사라졌다! 참고로 아래는 babel.config.json

{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", { "runtime": "automatic" }],
    "@babel/preset-typescript"
  ],
  "plugins": [
    "@babel/plugin-transform-private-property-in-object"
  ]
}