JavaScript has been used to design interactive websites and applications extensively. Programmers and developers use it frequently to design websites as every website has JavaScript code to make it interactive. JavaScript has a transcompiler called Babel, which is used to convert ECMAScript code into executable JavaScript code that programmers use to run Projects in JavaScript. When working with babel.js, you may experience the exception “Error: Plugin/Preset files are not allowed to export objects, only functions”.
Have a look at how the error appears
How do you get the error?
When you try to use a carousel file where you like to obtain index.js along with build block.build.js, you get the error message. Have a look at the script you try to use
webpack.config.js:
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;package.json:
{
"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"
}You end up getting the following error
ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.Ways to Resolve the Error Message “Error: Plugin/Preset files are not allowed to export objects, only functions”
The error appears because the preset babel-preset-react-optimize you are trying to use is not compatible with Babel 7.
Solution 1 – Replace the codes
If the combination of two babel versions like 6 and 7 are used. There is no compatibility between both. To solve the error, you need to replace the codes like this:
You should use:
"@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",Instead of
"@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",And your use this:
query: {
presets: ['@babel/react', '@babel/es2015'],
plugins: ['@babel/proposal-class-properties']
}Instead of:
query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}You need to make sure to update @babel/proposal-class-properties.
Solution 2 – Install babel-loader version 7
Another way to fix the error warning is to install the babel-loader version 7. To do that, you need to uninstall @babel/core and babel-loader@8^. To uninstall, you use the below commands
npm uninstall --save babel-loader
npm uninstall --save @babel/coreNow, install the 7 version of babel-loader. Use the following command
npm install --save-dev babel-loader@^7Conclusion
I hope you go through the post till the end to check out the solutions to remove the error warning “Error: Plugin/Preset files are not allowed to export objects, only functions”. You can try out the solutions to make the error go away successfully.
I wish you happy coding!
Don’t miss out to write a comment below if you like it or need further assistance.