reactjs 预设文件不允许导出对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49182862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preset files are not allowed to export objects
提问by sonia maklouf
I have a carousel file in which I want to get index.jsand build block.build.js, so my webpack.config.jsis:
我有一个轮播文件，我想在其中获取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;
The package.jsonwhich I use is below:
在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"
}
… but I get this error message:
...但我收到此错误消息：
ERROR in ./index.js
Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.
Does anyone know how to solve this?
有谁知道如何解决这个问题？
采纳答案by loganfsmyth
You're using a combination of Babel 6 and Babel 7. There is no guarantee of compatibility across versions:
您正在使用 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",
should be
应该
"@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",
and
和
query: {
presets: ['react', 'es2015'],
plugins: ['transform-class-properties']
}
would be
将是
query: {
presets: ['@babel/react', '@babel/es2015'],
plugins: ['@babel/proposal-class-properties']
}
I'm also confused because you didn't mention @babel/proposal-class-propertiesin your package.json, but assuming it is in there it should also be updated.
我也很困惑，因为你没有@babel/proposal-class-properties在你的 中提到package.json，但假设它在那里，它也应该更新。
回答by Kevin Youn
It happened to me and a simple solution for me was to uninstall babel-loader@8^and @babel/core:
它发生在我身上，对我来说一个简单的解决方案是卸载babel-loader@8^和@babel/core：
npm uninstall --save babel-loader
npm uninstall --save @babel/core
… and then to install version 7 babel-loader:
...然后安装版本 7 babel-loader：
npm install --save-dev babel-loader@^7
回答by Thomas Decaux
Also from babel-loaderv8, they have changed a little bit:
同样从babel-loaderv8 开始，它们发生了一些变化：
webpack 4.x | babel-loader 8.x | babel 7.x
webpack 4.x | babel-loader 8.x | 巴别塔 7.x
npm install -D babel-loader @babel/core @babel/preset-env webpack
webpack 4.x | babel-loader 7.x | babel 6.x
webpack 4.x | babel-loader 7.x | 通天塔 6.x
npm install -D babel-loader@7 babel-core babel-preset-env webpack
(same thing for @babel/preset-reactinstead of babel-preset-react).
（同样的事情@babel/preset-react而不是babel-preset-react）。
回答by Rawan-25
Got the same issue in my webpack/react project - it seems that there was an issue with the .babelrcfile.
在我的 webpack/react 项目中遇到了同样的问题 -.babelrc文件似乎有问题。
I updated it as seen below and it did the trick:
我更新了它，如下所示，它做到了：
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
]
}
回答by Anilal
this worked for me:
这对我有用：
npm uninstall --save babel-loader
npm uninstall --save @babel/core
npm install --save-dev babel-loader@^7
and in babelrc:
在 babelrc 中：
"presets" : ["es2015", "react"]
回答by Ramy M. Mousa
This solution worked for me:
这个解决方案对我有用：
npm install babel-loader babel-preset-react
then in .babelrc
然后在 .babelrc
{
"presets": [
"@babel/preset-env", "@babel/preset-react"
]
}
then run npm run start, webpack will generate the distdirectory.
然后运行npm run start，webpack 会生成dist目录。
回答by Jonatan
There are upgrades in babel 7 from version 6 refer to https://babeljs.io/docs/en/v7-migration. To solve the current problem/error
babel 7 从第 6 版开始有升级，请参阅https://babeljs.io/docs/en/v7-migration。解决当前的问题/错误
Install
安装
npm install --save-dev @babel/preset-react
npm install --save-dev @babel/preset-env
then in .babelrc the dependency for presets should look like
然后在 .babelrc 中，预设的依赖应该看起来像
{
"presets":["@babel/preset-env", "@babel/preset-react"],
"plugins": [
"react-hot-loader/babel", "transform-object-rest-spread"]
}
回答by Sam
I had "stage-1" within my presets in .babelrc, so I removed that and the error went away
我在 .babelrc 的预设中有“stage-1”，所以我删除了它，错误就消失了
回答by Anand Raja
That is due to outdated babel packagesbeing used. The babel project, just like most other active Javascript projects, have moved on to using scope packages. Hence, the package names starts with @babel
这是由于使用了过时的 babel 包。babel 项目，就像大多数其他活跃的 Javascript 项目一样，已经转向使用范围包。因此，包名以@babel
If you are using yarn, follow the below one:
如果您使用纱线，请按照以下步骤操作：
Step 1: Remove the old packages
步骤 1：删除旧包
$ yarn remove babel-core babel-loader babel-preset-env babel-preset-react
step 2: Add the new packages
第 2 步：添加新包
$ yarn add -D @babel/core babel-loader @babel/preset-env @babel/preset-react
If you are using npm, follow the below one:
如果您使用的是 npm，请按照以下步骤操作：
step 1: Remove the old packages
步骤 1：删除旧包
$ npm uninstall babel-core babel-loader babel-preset-env babel-preset-react
step 2: Add the new packages
第 2 步：添加新包
$ npm add -D @babel/core babel-loader @babel/preset-env @babel/preset-react
Step 3: common to both npm or yarn
第 3 步：对 npm 或 yarn 通用
After installing the newer packages, remember to update your .babelrcpresets from reactto @babel/preset-react. Here is a simple example
安装较新的软件包后，请记住将.babelrc预设从更新react为@babel/preset-react。这是一个简单的例子
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
回答by Rajesh Nasit
Replace your .babelrc file following code this fix my issue
按照代码替换您的 .babelrc 文件，这解决了我的问题
{
"presets": ["module:metro-react-native-babel-preset"]
}
