Preset files are not allowed to export objects - reactjs

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?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

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

Answer 6

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

Answer 7

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.

Answer 8

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

Answer 9

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

Answer 10

Replace your .babelrc file following code this fix my issue
{
"presets": ["module:metro-react-native-babel-preset"]
}

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

Answer 12

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