babel — Module build failed (from ./node_modules/babel-loader/lib/index.js) with webpack

При попытке настроить babel c использованием webpack — получил следующую ошибку

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module '@babel/core' npm ERR! code ELIFECYCLE npm ERR! errno 2 npm ERR! webpack-4-tutorial@1.0.0 build: `webpack --mode production` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the webpack-4-tutorial@1.0.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\<user>\AppData\Roaming\npm-cache\_logs\2021-06-09T08_00_00_123Z-debug.log
Code language: JavaScript (javascript)

package.json выглядит следующим образом

{ "name": "webpack-4-test-project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "babel-core": "^6.26.3", "babel-loader": "^8.0.0", "babel-preset-env": "^1.7.0", "webpack": "^4.17.1", "webpack-cli": "^3.1.0" } }
Code language: JSON / JSON with Comments (json)

Если вы сделаете установку в новом проекте как показано ниже,  установятся несовместимые версии, и вы получите ошибку при сборке.

npm install --sase-dev babel-loader babel-core

Для решения данной проблемы нужно:

  • Все очистить.
    • Удалить папку node_modules
    • Удалить все упоминания babel* в файле package.json
  • Установить babel как описано в документации к пакету. На данный момент команда выглядит так:
npm install -D babel-loader @babel/core @babel/preset-env
Code language: CSS (css)
  • Изменить файл .babelrc
{ "presets": ["@babel/preset-env"] }
Code language: JSON / JSON with Comments (json)

Добавить комментарий