I got this error while setup my react app using the webpack and babel. I try to change the version of babel but still getting the same error. I'm not getting where's the problem.
ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions. In /home/arslan/Downloads/code/node_modules/babel-preset-es2015/lib/index.js
at createDescriptor (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:178:11)
at items.map (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:109:50)
at Array.map (<anonymous>)
at createDescriptors (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
at createPresetDescriptors (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
at presets (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
at mergeChainOpts (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:320:26)
at /home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:283:7
at buildRootChain (/home/arslan/Downloads/code/node_modules/@babel/core/lib/config/config-chain.js:120:22)
at loadPrivatePartialConfig
Here's my Index.jsx File which is the root file.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import store from './store'
import Routes from './routes'
import './assets/scss/style.css';
import { authCheck } from './modules/auth/store/actions'
store.dispatch(authCheck())
ReactDOM.render(
<Provider store={store}>
<Routes />
</Provider>
,document.getElementById('app'));
Here's my Package.json File which includes all the dependencies.
{
"name": "bebes",
"version": "1.0.0",
"description": "",
"main": "index.jsx",
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.0",
"path": "^0.12.7",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"require": "^2.4.20",
"webpack-encoding-plugin": "^0.3.1"
},
"devDependencies": {
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.6.3",
"@babel/preset-es2015": "^7.0.0-beta.53",
"@babel/preset-react": "^7.0.0",
"@material-ui/core": "^3.9.3",
"@material-ui/icons": "^3.0.2",
"axios": "^0.18.0",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "4.1.3",
"chart.js": "2.7.2",
"chroma-js": "^1.4.1",
"firebase": "^5.7.2",
"history": "4.7.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"immutability-helper": "2.7.1",
"joi": "^13.7.0",
"joi-validation-strategy": "^0.3.3",
"lodash": "^4.17.11",
"moment": "^2.23.0",
"namor": "^1.1.1",
"node-sass": "^4.10.0",
"node-sass-chokidar": "^1.3.4",
"npm-run-all": "4.1.3",
"prop-types": "^15.6.2",
"react": "^16.7.0",
"react-big-calendar": "0.19.2",
"react-bootstrap-sweetalert": "^4.4.1",
"react-bootstrap-switch": "^15.5.3",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-wizard": "0.0.5",
"react-c3-component": "^1.4.0",
"react-c3js": "^0.1.20",
"react-chartjs-2": "^2.7.4",
"react-datetime": "^2.16.3",
"react-dom": "^16.7.0",
"react-iframe": "1.3.0",
"react-jvectormap": "0.0.3",
"react-loadable": "^5.5.0",
"react-perfect-scrollbar": "1.2.0",
"react-redux": "^6.0.1",
"react-router-dom": "4.2.2",
"react-scripts": "2.1.3",
"react-select": "^2.2.0",
"react-sparklines": "^1.7.0",
"react-stepzilla": "^4.8.0",
"react-table": "^6.8.6",
"react-tagsinput": "^3.19.0",
"react-validation": "^3.0.7",
"react-validation-mixin": "^5.4.0",
"reactstrap": "6.4.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"ree-validate": "^3.0.2",
"sweetalert": "^2.1.2",
"validator": "^10.10.0",
"webpack": "^4.41.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.4.1"
}
}
The configuration that i use for the webpack is given below
const HtmlWebPackPlugin = require("html-webpack-plugin");
const EncodingPlugin = require('webpack-encoding-plugin');
const path = require('path');
const webpack = require('webpack');
const { join, resolve } = require('path');
module.exports = {
mode: 'development',
entry: './src/index.jsx',
output: {
path:path.resolve(__dirname, 'dist'),
filename:'bundle.js'
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
compress: true,
historyApiFallback: true,
watchOptions: { aggregateTimeout: 300, poll: 1000 },
inline: true,
host: process.env.HOST, // set in Dockerfile for client container
port: process.env.PORT, // set in Dockerfile for client container
disableHostCheck: true, // when manipulating /etc/hosts
headers: {
'Access-Control-Allow-Origin': '*',
'Content-Type': 'application/javascript; charset=windows-1251'
}
},
module: {
rules: [
{
test: /\.(js|jsx|css)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
options: {
babelrc: true,
presets: ['@babel/preset-env']
}
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: './public/index.html',
filename: 'index.html'
})
]
};
The configuration file for the .babelrc is here.
{
"presets": [
"@babel/preset-env", "@babel/preset-react","es2015", "react", "stage-1"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import"
]
}
The error you are getting is because you are trying to use a Babel 6 preset on Babel 7.
"@babel/preset-env", "@babel/preset-react","es2015", "react", "stage-1"
is not quite right.
"es2015" was replaced by "@babel/preset-env""react" was replaced by "@babel/preset-react""stage-1" does not exist for Babel 7 and you should use the individual plugins that you actually want to enable.Change your config to
"presets": [
"@babel/preset-env", "@babel/preset-react"
],
and then add more plugins if there are other things that give you errors when you compile.