Module build failed (from ./node_modules/babel-loader/lib/index.js):ошибка в webpack.dev.js?

85
29 марта 2021, 08:40

Недавно начал проходить курс по webpack, поэтому не судите строго, столкнулся с одной ошибкой пытался гуглить ее, но никакие ответы не помогли ее решить, поэтому спрошу тут у вас. Сама ошибка:

ERROR in ./src/main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL] C:\Users\admin\Desktop\Projects\webpack-workflow\src\main.js: Unknown option: C:\Users\admin\Desktop\Projects\webpack-workflow\.babelrc.presents. Check out http://babeljs.io/docs/usage/options/ for more information about options.
A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:
Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

Файлы мои

webpack.dev.js

   const path = require("path");
module.exports = {
    entry: {
        main: ["./src/main.js"]
    },
    output: {
         filename: "[name]-bundle.js",
         path: path.resolve(__dirname, "../dist"),
    },
    devServer: {
        contentBase: "dist",
        overlay: true
    }, 
   module: {
       rules:[
           {
             test: /\.js$/,
             exclude: /node_modules/,
             use: {
                     loader: "babel-loader",
                     options:  {
                        presets: ['@babel/preset-env'],
                        plugins: ['@babel/plugin-transform-runtime']
                     }
                 }
           }
       ]
   }
}

.babelrc

{
    "presents":[
        [
            "env",{
             "targets":{
              "browsers": ["last 2 versions"]   
             },
             "debug": true
            }
        ]
    ],
    "plugins": ["transform-runtime"]
}

файл main.js

require("babel-runtime/regenerator")
require("./main.css") 
require("./index.html")
var a = async (args) => {
    const { a, b} = args
    await console.log("Hello World")
} 
a({a: 1, b: 2})

package.json

{
  "name": "webpack-workflow",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config=config/webpack.dev.js",
    "build": "webpack --config=config/webpack.dev.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-plugin-async-to-promises": "^1.0.5",
    "babel-plugin-transform-es2015-arrow-functions": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^3.0.0",
    "extract-loader": "^3.1.0",
    "file-loader": "^4.0.0",
    "html-loader": "^0.5.5",
    "style-loader": "^0.23.1",
    "webpack-cli": "^3.3.5",
    "webpack-dev-server": "^3.7.2"
  },
  "devDependencies": {
    "@babel/core": "^7.5.4",
    "@babel/preset-env": "^7.5.4",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^7.1.5",
    "webpack": "^4.35.3"
  }
}

Буду благодарен любому ответу или намеку, что не так делаю, ибо в этом деле я зеленый.Спасибо.

Answer 1

Столкнулся с такой же проблемой. Вся загвоздка была в .babelrc файле. Необходимо было поменять переменную "env" на "@babel/preset-env"

.babelrc

{
"presets": ["@babel/preset-env"]
}
READ ALSO
Привязки Python к JS и наоборот

Привязки Python к JS и наоборот

Подскажите способы примирить языки Python3 и JSКак можно реализовать вызов функции и передачу/получение параметров из одного языка в другой

116
Звездный рейтинг для сайта

Звездный рейтинг для сайта

Всем, привет) Пробую по примеру сделать звездный рейтинг для сайта, но не могу понять где ошибка в моем кодеВроде все делаю как в примере, но у меня...

101
Проблема с фильтрацией таблицы с <textarea>

Проблема с фильтрацией таблицы с <textarea>

Использую плагин для фильтров на колонках таблицУ меня есть некоторые таблицы, в которых можно редактировать ячейки

97