Preset files are not allowed to export objects

Question

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?

https://www.valentinog.com/blog/babel/ helped me. – Ryan Mar 11 '20 at 20:42 — Ryan, Mar 11 '20 at 20:42

score 107 · Accepted Answer · answered Mar 08 '18 at 22:10

107

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.

answered Mar 08 '18 at 22:10

loganfsmyth

146,797
27
317
241

1

I'd highlight that `babel-loader` 8 should be used with those other modules v7 and using `npm install --save-dev babel-loader@^7` gave me other errors – YakovL Jan 16 '19 at 21:38
how to then provide packages that belong to only either babel 6 or 7? I went through all solutions and either then it ask me @babel/core or babel-core. Can the package been changed manually? – Carmine Tambascia Jul 22 '19 at 15:12
how to then make sure a package that belong to only either babel 6 or 7? I went through all solutions and either then it ask me @babel/core or babel-core. I believe it has to do with node-modules still referencing somehow to wrong babel for a cache issue. I also tried to change manually them without luck – Carmine Tambascia Jul 22 '19 at 15:22
This situation still happens. So far this tool https://github.com/babel/babel-upgrade seems a way when more dependencies to upgrade are presented – Carmine Tambascia Dec 18 '19 at 16:45
I am still having issues with this error can someone help me? I am trying to run my react app (uses webpack) on an express server. Here is my github repo ( https://github.com/smthmelv/my-react-app/tree/addExpressJS ), any help would be greatly appreciated. – Darneezie Mar 19 '20 at 05:21

score 51 · Answer 2 · edited Feb 17 '19 at 10:01

51

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

edited Feb 17 '19 at 10:01

Eliran Malka

15,305
5
75
98

answered Dec 03 '18 at 23:49

Kevin Youn

681
6
4

1

It really worked, thanks alot for this info. I was also using babel/core version 7 and babel-loader version 8. So I just uninstall version 8 and install version 7 with command `npm install --save-dev babel-loader@^7` – harbrinder_singh Jan 11 '19 at 10:36
1

This fixed it for me, though I've not got any other js framework installed. – Nathaniel Flick Feb 09 '19 at 04:54
I had two different version of babel/core and babel-loader. So I had to uninstall babel-loader having version 8 and install again having version 7. It solved my problem. – curious.netter Feb 26 '19 at 11:15
2

I basically wasting an afternoon because so many packages changes since just few weeks ago when I first setup correctly webpack 2. There is a way to keep track of stable packages?This is not productive at all. I would like to develop react component not keep installing and unistall babel packages – Carmine Tambascia Jul 22 '19 at 14:47
1

This works for me though i got another error which is Module build failed (from ./node_modules/babel-loader/lib/index.js): so am looking forward to solve it – Francis Tito Sep 27 '19 at 09:05
1

Incredible as I keep having this issue since many open source projects are quite outdated but refer to babel 6 or a mix with babel 7 – Carmine Tambascia Dec 18 '19 at 16:20
Works like a charm. Thanks man. Appreciate it. – Davrick Apr 13 '21 at 09:34

Anand Raja · Answer 3 · 2021-12-29T18:23:46.893

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"
    ]
}

This is the right answer as of today... Thanks for laying it out cleanly. — Giampaolo Ferradini, Jul 16 '21 at 23:49

score 12 · Answer 4 · edited Feb 17 '19 at 09:57

12

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"
    ]
}

edited Feb 17 '19 at 09:57

Eliran Malka

15,305
5
75
98

answered Feb 12 '19 at 11:25

Rawan-25

1,625
1
16
23

score 11 · Answer 5 · answered Jan 04 '19 at 09:40

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).

score 4 · Answer 6 · edited Aug 31 '19 at 15:59

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"]

}

score 3 · Answer 7 · edited Feb 17 '19 at 09:59

3

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"]

edited Feb 17 '19 at 09:59

Eliran Malka

15,305
5
75
98

answered Feb 07 '19 at 21:37

Anilal

31
1

This is not complete to solve this issue at least to remember to install the bridge package that avoid that some hiddend dependency is still "requiring" the previous version, I solved this error after more then an 1 hour thanks to this npm install --save-dev "babel-core@^7.0.0-bridge.0" from here https://github.com/babel/babel/issues/8482 – Carmine Tambascia Jul 22 '19 at 15:33

score 3 · Answer 8 · answered Jun 05 '19 at 13:51

3

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.

answered Jun 05 '19 at 13:51

Ramy M. Mousa

5,301
3
37
43

score 1 · Answer 9 · answered Jun 28 '19 at 06:44

1

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

answered Jun 28 '19 at 06:44

Sam

491
8
52
142

score 0 · Answer 10 · answered Jan 24 '19 at 06:21

0

Replace your .babelrc file following code this fix my issue

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

answered Jan 24 '19 at 06:21

Rajesh Nasit

5,035
2
37
50

Ahmed Radi · Answer 11 · 2021-11-09T21:31:48.557

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

score 0 · Answer 12 · answered Dec 23 '21 at 12:11

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.

Preset files are not allowed to export objects

12 Answers12

Linked