안녕하세요 npm으로 바벨 세팅 완료 이후 오류들에 대해 질문합니다.

안녕하세요 선생님! 

수업 잘 듣고 있습니다.

섹션2.끝말잇기 수강중에 혼자 해결하기 힘든 오류들이 발생해 질문드립니다!

질문1. 바벨 세팅 이후에  package.json 파일에 해당 내용이 업데이트 되지 않습니다.

선생님 화면을 보면 바벨 세팅 이후에 package.json 파일의 dependencies와 devDependencies에 해당 내용이 자동으로 업데이트되던데 저는 안됩니다. 

설치는 다 잘 된 거 같은데 왜 없을까요!

없어도 상관없나요? 아니면 터미널에 나온 정보를 토대로 제가 직접 입력하면 될까요?

바벨 세팅 완료 캡쳐 <button class="se-component-edge-button se-component-edge-button-top __edge-area" type="button" tab-index="-1" data-compid="SE-eb660996-2098-4609-92b1-999cbe8851cd" data-direction="top"></button>

① npm i -D @babel/core

② npm i @babel/preset-env

③ npm i @babel/preset-react

④ npm i babel-loader

바벨 세팅 후 package.json 

질문2. 바벨 세팅 이후 npx webpack 을 하면 아래 캡쳐와 같은 오류가 뜹니다. 제가 해석한 오류가 맞는지 맞거나 틀리다면 어떻게 해결하면 되는지 알려주세요! 

오류 내용을 아래와 같이 이해했습니다.

① client.jsx 파일에서 module 빌드에 실패했습니다.

client.jsx 파일 내용도 캡쳐로 올립니다.

② module @babel/types을 찾을 수 없습니다. 

이 부분은 module을 입력했던 webpack.config.js 을 보면 될까 싶어 캡쳐 올립니다

③ Babel 6.x ('babel-core')을 쓰고 싶으면 babel-loader@7 설치가 필요합니다.

babel/core는 @7.15.5고 babel-loader@8로 설치된거 같은데 이 문구는 신경쓰지 않아도 될까요?

각 오류들을 어떻게 해결하면 될까요...

애초에 바벨이 제대로 설치되지 않아서 뜨는걸까요? 

도와주세요!