인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

나두원님의 프로필 이미지

작성한 질문수

프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)

바벨 사용법과 웹팩 통합

webpack build

작성

·

408

0

안녕하세요. 좋은 강의 감사드립니다.

 

에러를 해결하지 못하여 질문드립니다.

 babel을 따로 실행 시 문제가 없었는데

webpack.config.js에 babel-loader를 추가 한 후, 빌드 시 에러가 발생합니다.

 

에러 메세지 입니다.

Error: [BABEL] /Users/duwon/front_edu/bundler_tutorial/app.js: Could not find plugin "proposal-class-static-block". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js

 

[./app.js] 2.88 KiB {main} [built] [failed] [1 error]
 
ERROR in ./app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: [BABEL] /Users/duwon/front_edu/bundler_tutorial/app.js: Could not find plugin "proposal-class-static-block". Ensure there is an entry in ./available-plugins.js for it. (While processing: "/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js")
    at getPlugin (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js:67:11)
    at /Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js:258:62
    at Array.map (<anonymous>)
    at /Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/preset-env/lib/index.js:258:43
    at /Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/helper-plugin-utils/lib/index.js:22:12
    at /Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:199:14
    at Generator.next (<anonymous>)
    at Function.<anonymous> (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/gensync-utils/async.js:26:3)
    at Generator.next (<anonymous>)
    at step (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:261:32)
    at evaluateAsync (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:291:5)
    at Function.errback (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:113:7)
    at errback (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/gensync-utils/async.js:70:18)
    at async (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:188:31)
    at onFirstPause (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:216:13)
    at Generator.next (<anonymous>)
    at cachedFunction (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/caching.js:68:46)
    at cachedFunction.next (<anonymous>)
    at loadPresetDescriptor (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:292:44)
    at loadPresetDescriptor.next (<anonymous>)
    at recurseDescriptors (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:107:30)
    at recurseDescriptors.next (<anonymous>)
    at loadFullConfig (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:142:6)
    at loadFullConfig.next (<anonymous>)
    at Function.transform (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/transform.js:25:45)
    at transform.next (<anonymous>)
    at step (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:269:25)
    at /Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:273:13
    at async.call.result.err.err (/Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:223:11)
  at /Users/duwon/front_edu/bundler_tutorial/node_modules/gensync/index.js:189:28
감사합니다.

답변 2

1

나두원님의 프로필 이미지
나두원
질문자

nvm 으로 노드 버전을 변경하다 모듈에서 충돌이 난 것 같습니다.. 
node_modules 파일 삭제 후 다시 인스톨 하여 빌드하여 해결했습니다!

 

앗.. node_modules 가 문제가 아니라 제가 yarn add를 안해줘서 에러가 났던것 같습니다. npm, yarn 개념을 잘 모르고 사용하다 보니 어렵네요..;ㅎㅎ

김정환님의 프로필 이미지
김정환
지식공유자

npm 대신 yarn으로 패키지 관리를 하시나 보네요. 해결하셔서 다행입니다.  👍

0

나두원님의 프로필 이미지
나두원
질문자

package.json

"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"@babel/cli": "^7.8.4",
"@babel/core": "^7.8.4",
"@babel/plugin-proposal-class-static-block": "^7.15.4",
"@babel/plugin-transform-arrow-functions": "^7.8.3",
"@babel/plugin-transform-block-scoping": "^7.15.3",
"@babel/plugin-transform-strict-mode": "^7.8.3",
"@babel/preset-env": "^7.8.4",
"babel-loader": "^8.0.6",
"clean-webpack-plugin": "^3.0.0",
"core-js": "^2.6.12",
"css-loader": "^3.4.2",
"file-loader": "^5.0.2",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.9.0",
"style-loader": "^1.1.3",
"url-loader": "^3.0.0"
}

nodejs version: 13.7.0 입니다.