reactjs - 得到错误 : Plugin/Preset files are not allowed to export objects, 仅功能

Question

我在使用 webpack 和 babel 设置我的 React 应用程序时遇到了这个错误。我尝试更改 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"
  }
}

我用于 webpack 的配置如下

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

Answer 1

您遇到的错误是因为您尝试在 Babel 7 上使用 Babel 6 预设。

"@babel/preset-env", "@babel/preset-react","es2015", "react", "stage-1"

不太对。

"es2015"被“@babel/preset-env”取代

"react"被“@babel/preset-react”取代

"stage-1" Babel 7 不存在，您应该使用您实际想要启用的单个插件。

将您的配置更改为

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

然后添加更多插件，如果在编译时还有其他事情会给您带来错误。