Я получил эту ошибку при настройке приложения реакции с помощью веб-пакета и babel. Я пытаюсь изменить версию babel, но все равно получаю ту же ошибку. Я не понимаю, в чем проблема.
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
Вот мой файл Index.jsx, который является корневым файлом.
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'));
Вот мой файл Package.json, который включает в себя все зависимости,
{
"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"
}
}
Конфигурация, которую я использую для веб-пакета, приведена ниже
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'
})
]
};
Файл конфигурации для .babelrc находится здесь.
{
"presets": [
"@babel/preset-env", "@babel/preset-react","es2015", "react", "stage-1"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-syntax-dynamic-import"
]
}