出现错误:插件/预设文件不允许导出对象,只能导出功能

时间:2019-11-02 00:38:40

标签: reactjs webpack babeljs webpack-dev-server babel-loader

使用webpack和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"
  }
}

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

2 个答案:

答案 0 :(得分:0)

我认为您应该尝试以下

npm uninstall --save babel-loader
npm uninstall --save @babel/core
npm install --save-dev babel-loader@^7

对我有用。

还要看看您的依赖关系,您发现某些重复项可能会在某些时候导致错误。

答案 1 :(得分:0)

您收到的错误是因为您试图在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"
],

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