이번에 최종 팀프로젝트를 앞서 CRA대신 webpack을 사용할 때 생긴 두가지 에러를 정리해 봤다.
첫번째 에러
webpack.config.js 모듈에서 모듈에 babel-loader 설정 과정에서 난 에러
Module build failed (from ./node_modules/babel-loader/lib/index.js):
-
원인
bable-core와 babel-loader의 요구 버전이 맞지 않아서 생긴 에러 -
해결
babel-lodaer 버전8이면 babel-core는 7버전
babel-lodaer 버전이 6이면 babel-core는 6버전을 사용해야하는것 같다.npm uninstall babel-core 로 패키지를 삭제 =>
npm install babel-core@7.20.12 으로 재설치
두번째 에러
babel 세팅 후 웹을 실행 했는데 뜬 에러
ERROR in ./src/app-chat.tsx
Module build failed (from ./node_modules/ts-loader/index.js)
-
원인
babel은 최신 es6 문법을 es5이전의 문법으로 변환해주는 트랜스 컴파일러 패키지이고,
ts 에서 제공하는 tsconfig.json 파일 내에서 noEmit의 속성값이 true일 경우
target에 해당하는 es버전으로 트랜스컴파일 해줄수있다.따라서, webpackconfig에서 바벨로 트랜스파일된 결과파일과,
tsconfig에서 noEmit 속성이 겹쳐서 충돌로 에러가 난것으로 여겨진다. -
해결
tsconfig.json 파일에 있는 noEmit 속성값을 false로 변경하면 해결
