How Do I Fix This Error?: Module build failed (from ./node_modules/babel-loader/lib/index.js):

Question

I'm building a project using react and express. while trying to set up the environment I keep getting an Error. Being new to babel I decided to search the internet for solutions but nothing I have tried has worked for me. I tried uninstalling @babel/core & @babel/preset-env and reinstalling their updated versions & I tried restarting VS code. Right now I'm completely stuck. Some help would be appreciated.

The Error:

ERROR in ./src/app/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: Unknown option: .presents. Check out https://babeljs.io/docs/en/babel-core/#options for more information about options.
    at throwUnknownError (C:\Users\Yanki XXIV\Desktop\pluralsight-project\node_modules\@babel\core\lib\config\validation\options.js:122:11)
    at C:\Users\Yanki XXIV\Desktop\pluralsight-project\node_modules\@babel\core\lib\config\validation\options.js:106:5
    at Array.forEach (<anonymous>)
    at validateNested (C:\Users\Yanki XXIV\Desktop\pluralsight-project\node_modules\@babel\core\lib\config\validation\options.js:82:21)
    at validate (C:\Users\Yanki XXIV\Desktop\pluralsight-project\node_modules\@babel\core\lib\config\validation\options.js:73:10)
    at C:\Users\Yanki XXIV\Desktop\pluralsight-project\node_modules\@babel\core\lib\config\config-chain.js:169:34
    at cachedFunction (C:\Users\Yanki XXIV\Desktop\pluralsight-project\node_modules\@babel\core\lib\config\caching.js:33:19)
sight-project\node_modules\@babel\core\lib\config\partial.js:82:18)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/app main[1]

package.json

{
  "name": "pluralsight-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/node": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "babel-loader": "^8.0.2",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.7"
  },
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.5.0",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0"
  }
}

The error Also talks about index.jsx, I have no idea why but here is the file, index.jsx:

import { store } from './store';

import React from 'react';
import ReactDOM from 'react-dom';
import { Main } from './components/Main'


ReactDOM.render(
    < Main />,
    document.getElementById("app")
)

bablrc:

{
    "presents":[
       ["@babel/present-env", {
        "targets": {
            "node":"current"
        }
       }],
       "@babel/present-react"
    ]
}

Answer 1

The Babel config file should be:

{
    "presets":[
       ["@babel/preset-env", {
        "targets": {
            "node":"current"
        }
       }],
       "@babel/preset-react"
    ]
}