不允许预设置文件导出对象

我有一个 carousel 文件,其中我想得到 index.js并构建 block.build.js,所以我的 webpack.config.js是:

var config = {
entry: './index.js',
output: {
path: __dirname,
filename: 'block.build.js',
},
devServer: {
contentBase: './Carousel'
},
module : {
rules : [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}
}
]
}
};
module.exports = config;

我使用的 package.json如下:

{
"name": "carousel",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",
"cross-env": "^5.1.3",
"lodash": "^4.17.5",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-swipeable": "^4.2.0",
"styled-components": "^3.2.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},
"devDependencies": {
"webpack": "^4.1.1",
"webpack-cli": "^2.0.10",
"webpack-dev-server": "^3.1.0"
},
"author": "brad traversy",
"license": "ISC"
}

但我收到这个错误信息:

ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.

有人知道怎么解决吗?

140866 次浏览

你使用的是 Babel 6和 Babel 7的组合,不能保证不同版本之间的兼容性:

"@babel/core": "^7.0.0-beta.40",
"babel-cli": "^6.26.0",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"babel-preset-react": "^6.24.1",

应该是

"@babel/core": "^7.0.0-beta.40",
"@babel/cli": "^7.0.0-beta.40",
"babel-loader": "^8.0.0-beta.0",
"babel-plugin-lodash": "^3.3.2",
"babel-plugin-react-transform": "^3.0.0",
"@babel/preset-react": "^7.0.0-beta.40",

还有

    query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}

would be

    query: {
presets: ['@babel/react', '@babel/es2015'],
plugins: ['@babel/proposal-class-properties']
}

我也感到困惑,因为你没有提到 @babel/proposal-class-properties在您的 package.json,但假设它是在那里,它也应该更新。

它发生在我身上,对我来说一个简单的解决方案是卸载 babel-loader@8^@babel/core:

npm uninstall --save babel-loader
npm uninstall --save @babel/core

然后安装第7版巴贝尔加载程序:

npm install --save-dev babel-loader@^7

也从 babel-loader v8,他们已经改变了一点点:

Webpack 4.x | babel-loader 8.x | babel 7. x

npm install -D babel-loader @babel/core @babel/preset-env webpack

Webpack 4.x | babel-loader 7.x | babel 6. x

npm install -D babel-loader@7 babel-core babel-preset-env webpack

(对于 @babel/preset-react而不是 babel-preset-react也是一样)。

替换你的.babelrc 文件下面的代码这修复我的问题

{
"presets": ["module:metro-react-native-babel-preset"]
}

这对我很有效:

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

用巴贝尔语说:

"presets" : ["es2015", "react"]

在我的 webpack/response 项目中也遇到了同样的问题——似乎 .babelrc文件也有问题。

如下图所示,我对其进行了更新,并取得了成效:

{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}

这个方法对我很有效:

npm install babel-loader babel-preset-react

然后是 .babelrc

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

然后运行 npm run start,webpack 将生成 dist目录。

我在.babelrc 中的预置中有“ stage-1”,所以我删除了它,错误消失了

There are upgrades in babel 7 from version 6 refer to https://babeljs.io/docs/en/v7-migration. To solve the current problem/error

安装

npm install --save-dev @babel/preset-react


npm install --save-dev @babel/preset-env

然后在.babelrc 中,预设置的依赖项应该是

{


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


"plugins": [
"react-hot-loader/babel", "transform-object-rest-spread"]


}

这是由于使用了 过时的通心粉包装。与大多数其他活动的 Javascript 项目一样,babel 项目已经转向使用范围包。因此,包名以 @babel开头

如果你正在使用纱线,请遵循下面的步骤:

步骤1: 删除旧包

$ yarn remove babel-core babel-loader babel-preset-env babel-preset-react

step 2: Add the new packages

$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

如果您正在使用 npm,请遵循以下步骤:

步骤1: 删除旧包

$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

步骤2: 添加新包

$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

步骤3: 与 npm 或纱线共用

在安装了新的软件包之后,请记住将 .babelrc预设从 react更新到 @babel/preset-react

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

webpack.config.js文件中添加

module: {
rules: [{
loader: 'babel-loader',
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
options: { presets: ['@babel/env','@babel/preset-react'] }
},
]
}

并创建一个名为 。巴贝尔的文件

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

包裹 Json中必须安装这些 依赖关系依赖性

"dependencies": {
"@babel/preset-env": "^7.16.0",
"@babel/preset-react": "^7.16.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"validator": "^13.7.0",
"webpack": "^5.62.1"
},
"devDependencies": {
"@babel/core": "^7.16.0",
"@types/react": "^17.0.34",
"@types/react-dom": "^17.0.11",
"babel-loader": "^8.2.3",
"nodemon": "^2.0.14",
"webpack-cli": "^4.9.1"
}

首先,删除已安装的软件包

如果使用纱线

yarn remove babel-core babel-loader babel-preset-env babel-preset-react

if npm use

npm uninstall babel-core babel-loader babel-preset-env babel-preset-react

Then install packages

使用 纱线安装

yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

使用 npm安装

npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react

The solution that worked for me using Yarn was:

yarn add babel-loader babel-preset-react @babel/preset-env @babel/preset-react -D

然后进入,或者只进入,巴贝尔

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

然后运行 webpackyarn webpack,它将在项目根目录上生成 dist

显然,由于 babel-preset-response 和 babel-preset-env 模块的不兼容性,您似乎正面临一些问题。这些模块现在已经过时了,因此您可能需要安装它们的最新替代品。@ babel/core 看起来不错。

你需要做的是:

  1. 删除所有与巴别塔相关的旧模块。虽然没有必要把它们全部删除,但我建议你从零开始。

yarn remove babel-preset-react babel-preset-env

Or if you're using npm then enter the following code in the terminal:

npm uninstall babel - preset - react babel - preset - env

一旦旧模块被删除,安装新的。我正在显示纱线和 npm 的代码

yarn add @babel/core @babel/preset-react @babel/preset/env --save


npm i @babel/core @babel/preset-react @babel/preset/env --save
请注意,即使您已经安装了@babel/core 模块,也要重新安装它,因为它可以帮助我运行代码。

然后,作为最后一步,继续用下面的代码编辑.babelrc 文件:

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