inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Tìm hiểu và thực hành về môi trường phát triển frontend (webpack, babel, eslint..)

Sử dụng Babel và tích hợp webpack

webpack build

498

dudley

1 câu hỏi đã được viết

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
감사합니다.

웹팩 babel nodejs eslint

Câu trả lời 2

1

dudley

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

 

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

0

jeonghwan

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

0

dudley

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

지금 시점에서 해당 강의를 듣는 것에 대하여

1

111

3

2025년 기준 번들러 트렌드와 선택 기준이 궁금합니다 (Webpack, Vite, tsup 등)

1

223

1

에러 해결 공유드립니다

1

225

2

webpack 4 버전과 호환되는 플러그인 버전 공유드립니다

1

234

2

eslint

0

381

3

도와주세요!

0

167

2

[수강 중 트러블슈팅 공유] webpack, webpack-cli 버전

1

145

1

질문 an error occurred while loading the image

1

470

1

webpack에서 babel-loader 사용할때 질문

1

150

1

자주 사용하는 플러그인 에서 질문이 있습니다.

1

168

1

eslint no-extra-semi 관련 질문

1

144

1

webpack5 에서 open index.html하는법 + 질문

1

168

1

TypeError: ((process.env.NODE_ENV === "production") && [MiniCssExtractPlugin]) is not iterable

2

302

1

혹시 웹팩 5 내용으로 강의 업데이트는 안되는건가요?

1

371

1

에러없이 png안뜨시는 분들

1

275

1

Error: Cannot find module &#x27;node:crypto&#x27;

1

465

1

DefinePlugin 관련; env와 관련하여, (21.06.22 16:15, aloha_jh) 답변포함

1

407

1

깃허브 확인 문의

0

575

1

폴더를 prettier로 돌렸을 때 나오는 에러 구문에 대한 질문

0

407

1

해쉬값과 캐쉬 갱신

1

461

1

Hash 에러 발생

1

2668

2

webpack.config.js에서의 CommonJS방식에 대한 질문

0

831

3

웹팩 버전

0

524

1

웹팩-cli 버전을 명시하지 않으면 왜 에러가 날까요?

0

485

1