“ npm start”抛出错误：不允许插件/预设文件导出对象，仅导出功能

Question

I'm new to reactJS.I was following the steps given in one tutorial. When I type "npm start" I'm getting the following error:

ERROR in ./main.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In C:\Users\user\Desktop\reactApp\node_modules\babel-preset-es2015\lib\index.js
    at createDescriptor (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:178:11)
    at items.map (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:50)
    at Array.map (native)
    at createDescriptors (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:109:29)
    at createPresetDescriptors (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:101:10)
    at passPerPreset (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:58:96)
    at cachedFunction (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\caching.js:33:19)
    at presets.presets (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-descriptors.js:29:84)
    at mergeChainOpts (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-chain.js:315:26)
    at C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-chain.js:278:7
    at buildRootChain (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\config-chain.js:68:29)
    at loadPrivatePartialConfig (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\partial.js:57:55)
    at Object.loadPartialConfig (C:\Users\user\Desktop\reactApp\node_modules\@babel\core\lib\config\partial.js:82:18)
    at Object.<anonymous> (C:\Users\user\Desktop\reactApp\node_modules\babel-loader\lib\index.js:82:26)
    at next (native)
    at step (C:\Users\user\Desktop\reactApp\node_modules\babel-loader\lib\index.js:3:221)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./main.js main[1]

Can someone please help me find the solution?

package.json

{
  "name": "npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { "start": "webpack-dev-server" },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "webpack": "^4.17.1",
    "webpack-dev-server": "^3.1.6"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.0",
    "gulp-babel": "^8.0.0"
  }
}

webpack.config.js

var config = {
  entry: "./main.js",
  output: { path: "/", filename: "index.js" },
  devServer: { inline: true, port: 8080 },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: { presets: ["es2015", "react"] }
      }
    ]
  }
};
module.exports = config;

Answer 1

var config = {
  entry: "./main.js",
  output: { path: "/", filename: "index.js" },
  devServer: { inline: true, port: 8080 },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: { presets: ["@babel/preset-env", "@babel/preset-react"] }
      }
    ]
  }
};
module.exports = config;

since its babel 7, it has to be namespaced, @babel ...