![](/img/trans.png)
[英]@babel/plugin-proposal-class-properties Still Fails with "classProperties isn't currently enabled"
[英]Support for the experimental syntax 'classProperties' isn't currently enabled (8:16). Add @babel/plugin-proposal-class-properties
我正在尝试编译我的 React Native App,但出现以下错误:
SyntaxError: C:\Users\Ori\Desktop\Projects\React\my-app\node_modules@react-native-community\google-signin\src\GoogleSignin.js:目前未启用对实验性语法“classProperties”的支持(8:16)
将 @babel/plugin-proposal-class-properties ( https://git.io/vb4SL ) 添加到 Babel 配置的“插件”部分以启用转换。
如果我理解正确,因为它是一个反应原生应用程序,.babelrc 文件被忽略,但仍有一些方法可以克服它。 我在 web 上看到了一些解决方案,但似乎没有一个对我有用。
我试过了:
module.exports = {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
};
{
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
}
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
似乎没有任何效果。
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@material-ui/core": "^4.5.0",
"@material-ui/icons": "^4.4.3",
"@react-native-community/google-signin": "^3.0.1",
"jquery": "^3.4.1",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-ga": "^2.7.0",
"react-native-google-signin": "^2.1.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"babel": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
[
"@babel/plugin-proposal-class-properties",
{
"loose": true
}
]
]
},
"devDependencies": {
"@babel/cli": "^7.6.4",
"@babel/core": "^7.6.4",
"@babel/plugin-proposal-class-properties": "^7.5.5"
}
}
babel.config.js:
module.exports = {
plugins: [
['@babel/plugin-proposal-decorators', { legacy: true }],
['@babel/plugin-proposal-class-properties', { loose: true }],
'@babel/plugin-syntax-dynamic-import',
'@babel/plugin-transform-regenerator',
[
'@babel/plugin-transform-runtime',
{
helpers: false,
regenerator: true,
},
],
],
presets: [
"@babel/preset-flow",
'module:metro-react-native-babel-preset',
],
};
如果有人能阐明这个问题,那就太好了,谢谢!
根据 [this GitHub][1] 问题,如果您使用 create-react-app,您应该将.babelrc
或babel.config.js
配置复制到webpack.config.js
并删除这些。因为 htis 有两行代码babelrc: false,configFile: false,
你在 babelrc 中的配置,.. 没用。 并且您的 webpack.config.js 在您的 ./node_madules/react-scripts/config 文件夹中。 你可以像这样解决问题:
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],
'@babel/preset-env', '@babel/preset-react'
],
plugins: ['@babel/plugin-proposal-class-properties'],
.
.
.
或者您可以根据您的配置文件将babelrc: false,configFile: false,
更改为 true。 或者您可以弹出并执行此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.