webpack build

Question

안녕하세요. 좋은 강의 감사드립니다. 에러를 해결하지 못하여 질문드립니다. 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 () 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 () at Function. (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/gensync-utils/async.js:26:3) at Generator.next () 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 () at cachedFunction (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/caching.js:68:46) at cachedFunction.next () at loadPresetDescriptor (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:292:44) at loadPresetDescriptor.next () at recurseDescriptors (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:107:30) at recurseDescriptors.next () at loadFullConfig (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/config/full.js:142:6) at loadFullConfig.next () at Function.transform (/Users/duwon/front_edu/bundler_tutorial/node_modules/@babel/core/lib/transform.js:25:45) at transform.next () 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 감사합니다.

dudley · Answer

nvm 으로 노드 버전을 변경하다 모듈에서 충돌이 난 것 같습니다..  node_modules 파일 삭제 후 다시 인스톨 하여 빌드하여 해결했습니다!   앗.. node_modules 가 문제가 아니라 제가 yarn add를 안해줘서 에러가 났던것 같습니다. npm, yarn 개념을 잘 모르고 사용하다 보니 어렵네요..;ㅎㅎ

dudley · Answer

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 입니다.