Babel-loader: Plugin/Preset files are not allowed to export objects, only functions.

[LuckyPigeon]

I got Error: Plugin/Preset files are not allowed to export objects, only functions. when I execute webpack
Here is my .babelrc:

{
  "presets": ["@babel/preset-env", "@babel/preset-react", "es2015"]
}

Here is my package.json

{                                                                       
  "name": "nsmg",                                                       
  "version": "0.1.0",                                                   
  "description": "Novel Story Map Generator",                           
  "main": "./src/App.js",                                               
  "directories": {                                                      
    "example": "examples",                                              
    "lib": "lib",                                                       
    "test": "test"                                                      
  },                                                                    
  "dependencies": {                                                     
    "chai": "^4.1.2",                                                   
    "react": "^16.5.1",                                                 
    "react-dom": "^16.5.2",                                             
    "webpack": "^4.18.1",                                               
    "webpack-dev-server": "^3.1.8"                                      
  },                                                                    
  "devDependencies": {                                                  
    "@babel/core": "^7.1.2",                                            
    "@babel/preset-env": "^7.1.0",                                      
    "@babel/preset-react": "^7.0.0",                                    
    "babel-loader": "^8.0.4",                                           
    "babel": "^5.8.23",                                                 
    "babel-preset-env": "^1.7.0",                                       
    "mocha": "^5.2.0",                                                  
    "webpack-cli": "^2.1.5"                                             
  },                                                                    
  "scripts": {                                                          
    "test": "mocha",                                                    
    "start": "webpack-dev-server --content-base build --inline --hot"   
  },                                                                    
  "repository": {                                                       
    "type": "git",                                                      
    "url": "git+ssh://[email protected]/LuckyPigeon/NSMG.git"              
  },                                                                    
  "keywords": [                                                         
    "NSMG"                                                              
  ],                                                                    
  "author": "LuckyPigeon",                                              
  "license": "MIT",                                                     
  "bugs": {                                                             
    "url": "https://gitlab.com/LuckyPigeon/NSMG/issues"                 
  },                                                                    
  "homepage": "https://gitlab.com/LuckyPigeon/NSMG#README"              
}     

Here is my webpack.config.js:

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var module_dir = `${__dirname}/node_modules`;
var path = require('path');

module.exports = {
  context: __dirname,
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./src/app/index.js",
  output: {
    path: __dirname + "/build",
    filename: "scripts.min.js"
  },
  plugins: debug ? [] : [
    htmlWebpackPlugin,
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
          {
            test: /\.(js|jsx)?$/,
                exclude: [/node_modules/, /MSSQL/],
                /*
                use: {
                  loader: "babel-loader"
                  query: {
                    presets: ['react', 'es2015', 'stage-0'],
                  }
                }*/

                use: {
                  loader: "babel-loader",
                  query: {
                    presets: ['es2015', 'react', 'stage-0'],
              }
                }
          },
          {
            test: /\.css$/,
                use: ["style-loader", "css-loader"]
          }
        ]
  },
  resolveLoader: {
    modules: [
          __dirname + '/node_modules'
        ]
  }
}

Can someone guide me through this?

[nicolo-ribaudo]

You should remove react from the presets, since @babel/preset-react is correct. Also, what is ex2015?

[LuckyPigeon]

After I remove react and change ex2015 to es2015, it still shows the same error.

[nicolo-ribaudo]

You don't need es2015 (which should be @babel/preset-es2015 anyway), since it is included in @babel/preset-env

[nicolo-ribaudo]

Also, you can remove these packages form your package.json:

"babel": "^5.8.23",                                                 
"babel-preset-env": "^1.7.0",

[LuckyPigeon]

After I try, it show the same error.

[nicolo-ribaudo]

Sorry for not noticing it before, but why are you using both babelrc and passing the config to babel-loader? (You need to use the @babel/ packages also there anyway)

[LuckyPigeon]

I use passing config to babel-loader before and because of the error showed up, so I add a babelrc and hope it will work, but it doesn't achieve my expectation and get error again. So I keep both of them and keep searching the new solution of my error.

[existentialism]

@LuckyPigeon if you want to pass configuration via babel-loader, you will want to update those items to with their v7 equivalents:

"query": {
  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

And remove your .babelrc, or vice versa.

[LuckyPigeon]

The configuration has passed, thanks for all helps!

[elalemanyo]

@existentialism Sorry but I don't understand where I should put the query setting that you suggest.
I am having one issue maybe related: https://github.com/novemberborn/babel-plugin-es6-promise/issues/27

Any suggestion?

Thanks

[existentialism]

@LuckyPigeon Glad to hear it!

@elalemanyo that was in reference to @LuckyPigeon's webpack loader config in his original post:

use: {
  loader: "babel-loader",
  query: {
    presets: ['es2015', 'react', 'stage-0'],
  }
}

[Vijay431]

@LuckyPigeon if you want to pass configuration via babel-loader, you will want to update those items to with their v7 equivalents:

"query": {
  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

And remove your .babelrc, or vice versa.

It works fine for me!

[bravemaster619]

You don't need es2015 (which should be @babel/preset-es2015 anyway), since it is included in @babel/preset-env

Thanks @nicolo-ribaudo. You saved my day!

[pravinkarale]

@existentialism Thanks,

"query": {
"presets": ["@babel/preset-env", "@babel/preset-react"],
}
this works for me

[tarfao]

@existentialism Thanks bro,

"query": {
"presets": ["@babel/preset-env", "@babel/preset-react"],
}

this work for me too

[JovanT]

@LuckyPigeon if you want to pass configuration via babel-loader, you will want to update those items to with their v7 equivalents:

"query": {
  "presets": ["@babel/preset-env", "@babel/preset-react"],
}

And remove your .babelrc, or vice versa.

for me too thank you