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?

I didn't see it in the answers, but I also get this error on projects that need to migrate from babel-preset-es2015 to @babel/preset-env — ironic_ollins, Mar 31 '23 at 16:10

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

116

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

156,129
30
331
251

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
1

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 54 · Answer 2 · edited Feb 17 '19 at 10:01

54

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,821
6
77
100

answered Dec 03 '18 at 23:49

Kevin Youn

721
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

score 12 · Answer 3 · 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,821
6
77
100

answered Feb 12 '19 at 11:25

Rawan-25

1,753
1
17
25

score 11 · Answer 4 · 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 5 · Answer 5 · edited Aug 31 '19 at 15:59

5

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

}

edited Aug 31 '19 at 15:59

Suraj Rao

29,388
11
94
103

answered Aug 31 '19 at 15:21

Jonatan

83
2
5

it worked partially formed me. it said that could't find `react-hot-loader/babel` so I defined like this: `{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "styled-components", "transform-class-properties", "transform-object-rest-spread" ] }` and worked – Jorge Peralta May 24 '23 at 17:05

score 3 · Answer 6 · 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,821
6
77
100

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 7 · 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,727
3
34
45

score 1 · Answer 8 · 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

1,765
11
82
176

Ahmed Radi · Answer 9 · 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 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 N

6,198
2
47
58

score 0 · Answer 11 · 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.

score 0 · Answer 12 · answered Oct 12 '22 at 20:40

Clearly seems like you're facing issues due to the non-compatibility of babel-preset-react and babel-preset-env modules. These modules are now obsolete so you may need to install their latest alternatives. @babel/core seems to be fine.

Here's what you need to do:

Remove all the old babel-related modules. Although it's not necessary to remove all of them but I would suggest you start with a clean slate.

yarn remove babel-preset-react babel-preset-env

Or if you're using npm then enter the following code in the terminal:

npm uninstall babel - preset - react babel - preset - env

Once the old modules are removed, install the new ones. I'm showing codes for both yarn and npm

yarn add @babel/core @babel/preset-react @babel/preset/env --save

npm i @babel/core @babel/preset-react @babel/preset/env --save

Note that even if you already have @babel/core module installed, reinstall it as it helped me run my code for whatever reasons.

After that, as a final step, go ahead and edit your .babelrc file with this code:

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

shouldn't installation line read "npm i @babel/core @babel/preset-react @babel/preset-env --save" rather than "npm i @babel/core @babel/preset-react @babel/preset/env --save" ? — Alice Oualouest, Dec 05 '22 at 12:10

score 0 · Answer 13 · answered Jul 16 '23 at 21:28

I was struggling with this error for build (npm run build) for the last one week and with all of the available resources and the tips from stackoverflow also did not work for me. Finally as it was earlier suggested from stackoverflow on the .babelrc file in the src folder where the presets we should define only the code given below:

{
   "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
        ],
        "plugins":
        ["transform-class-properties", "transform-object-rest-spread",
         "@babel/plugin-proposal-import-attributes-to-assertions"]
}

Since @babel-core present in the package.json file we do not need to mention the statement in the above code viz., "react", "es2015", "stage-0". After commenting the viz., part of line shown above my problem got solved. Finally my code build without any errors.

Preset files are not allowed to export objects

13 Answers13

Linked