得到错误：插件/预设文件不允许导出对象，只有功能
Posted
技术标签:
【中文标题】得到错误：插件/预设文件不允许导出对象，只有功能【英文标题】：Got error: Plugin/Preset files are not allowed to export objects, only functions 【发布时间】：2020-02-28 05:29:51 【问题描述】：我在使用 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"
]
【问题讨论】：
【参考方案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"
],
如果在编译时有其他东西给你带来错误，然后添加更多插件。
【讨论】：
感谢您提供解决方案。我自己解决了这个问题。 webpack的配置有很多问题，这就是它不起作用的原因。【参考方案2】：我认为你应该尝试以下方法
npm uninstall --save babel-loader
npm uninstall --save @babel/core
npm install --save-dev babel-loader@^7
这对我有用。
还请查看您的依赖项，您有一些重复项，可能会在某些时候导致您出错。
【讨论】：
我试试这个，但没有运气。这会导致另一个错误。以上是关于得到错误：插件/预设文件不允许导出对象，只有功能的主要内容，如果未能解决你的问题，请参考以下文章