Preset files are not allowed to export objects

I have a carousel file in which I want to get index.js and build block.build.js, so my webpack.config.js is:

var config = {
  entry: './index.js',
  output: {
    path: __dirname,
    filename: 'block.build.js',
  },
  devServer: {
    contentBase: './Carousel'
  },
  module : {
    rules : [
      {
        test: /.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['react', 'es2015'],
          plugins: ['transform-class-properties']
        }
      }
    ]
  }
};
module.exports = config;

The package.json which I use is below:

{
  "name": "carousel",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "@babel/core": "^7.0.0-beta.40",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.0-beta.0",
    "babel-plugin-lodash": "^3.3.2",
    "babel-plugin-react-transform": "^3.0.0",
    "babel-preset-react": "^6.24.1",
    "cross-env": "^5.1.3",
    "lodash": "^4.17.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-swipeable": "^4.2.0",
    "styled-components": "^3.2.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.10",
    "webpack-dev-server": "^3.1.0"
  },
  "author": "brad traversy",
  "license": "ISC"
}

… but I get this error message:

ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

Does anyone know how to solve this?

You're using a combination of Babel 6 and Babel 7. There is no guarantee of compatibility across versions:

"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",

should be

"@babel/core": "^7.0.0-beta.40",
"@babel/cli": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"@babel/preset-react": "^7.0.0-beta.40",

and

    query: {
      presets: ['react', 'es2015'],
      plugins: ['transform-class-properties']
    }

would be

    query: {
      presets: ['@babel/react', '@babel/es2015'],
      plugins: ['@babel/proposal-class-properties']
    }

I'm also confused because you didn't mention @babel/proposal-class-properties in your package.json, but assuming it is in there it should also be updated.

It happened to me and a simple solution for me was to uninstall babel-loader@8^ and @babel/core:

npm uninstall --save babel-loader
npm uninstall --save @babel/core

… and then to install version 7 babel-loader:

npm install --save-dev babel-loader@^7

That is due to outdated babel packages being used. The babel project, just like most other active Javascript projects, have moved on to using scope packages. Hence, the package names starts with @babel

If you are using yarn, follow the below one:

Step 1: Remove the old packages

$ yarn remove babel-core babel-loader babel-preset-env babel-preset-react

step 2: Add the new packages

$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

If you are using npm, follow the below one:

step 1: Remove the old packages

$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

step 2: Add the new packages

$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

Step 3: common to both npm or yarn

After installing the newer packages, remember to update your .babelrc presets from react to @babel/preset-react. Here is a simple example

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

Got the same issue in my webpack/react project - it seems that there was an issue with the .babelrc file.

I updated it as seen below and it did the trick:

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        "transform-class-properties",
        "transform-object-rest-spread"
    ]
}

Also from babel-loader v8, they have changed a little bit:

webpack 4.x | babel-loader 8.x | babel 7.x

npm install -D babel-loader @babel/core @babel/preset-env webpack

webpack 4.x | babel-loader 7.x | babel 6.x

npm install -D babel-loader@7 babel-core babel-preset-env webpack

(same thing for @babel/preset-react instead of babel-preset-react).

There are upgrades in babel 7 from version 6 refer to https://babeljs.io/docs/en/v7-migration. To solve the current problem/error

Install

npm install --save-dev @babel/preset-react

npm install --save-dev @babel/preset-env

then in .babelrc the dependency for presets should look like

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

   "plugins": [
    "react-hot-loader/babel", "transform-object-rest-spread"]

}

this worked for me:

npm uninstall --save babel-loader
npm uninstall --save @babel/core
npm install --save-dev babel-loader@^7

and in babelrc:

"presets" : ["es2015", "react"]    

This solution worked for me:

npm install babel-loader babel-preset-react

then in .babelrc

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

then run npm run start, webpack will generate the dist directory.

I had "stage-1" within my presets in .babelrc, so I removed that and the error went away

Replace your .babelrc file following code this fix my issue

{
  "presets": ["module:metro-react-native-babel-preset"]
}

in webpack.config.js file add

module: {
    rules: [{
            loader: 'babel-loader',
            test: /\.(js|jsx)$/,
            exclude: /(node_modules|bower_components)/,
            options: { presets: ['@babel/env','@babel/preset-react'] }
        },
    ]
}

and create a file named .babelrc

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

and in package.json must install these dependencies and devDependencies

"dependencies": {
   "@babel/preset-env": "^7.16.0",
   "@babel/preset-react": "^7.16.0",
   "babel-cli": "^6.26.0",
   "babel-core": "^6.26.3",
   "react": "^17.0.2",
   "react-dom": "^17.0.2",
   "validator": "^13.7.0",
   "webpack": "^5.62.1"
},
"devDependencies": {
   "@babel/core": "^7.16.0",
   "@types/react": "^17.0.34",
   "@types/react-dom": "^17.0.11",
   "babel-loader": "^8.2.3",
   "nodemon": "^2.0.14",
   "webpack-cli": "^4.9.1"
}

first, remove installed packages

if yarn use

yarn remove babel-core babel-loader babel-preset-env babel-preset-react

if npm use

npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

Then install packages

install using yarn

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

install using npm

npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

The solution that worked for me using Yarn was:

yarn add babel-loader babel-preset-react @babel/preset-env @babel/preset-react -D

then in .babelrc.json or only .babelrc

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

then run webpack or yarn webpack, it'll generate the dist on the project root directory.