当前未启用对实验语法“classProperties”的支持 (8:16)。添加@babel/plugin-proposal-class-properties
Posted
技术标签:
【中文标题】当前未启用对实验语法“classProperties”的支持 (8:16)。添加@babel/plugin-proposal-class-properties【英文标题】:Support for the experimental syntax 'classProperties' isn't currently enabled (8:16). Add @babel/plugin-proposal-class-properties 【发布时间】:2020-02-09 10:57:43 【问题描述】:我正在尝试编译我的 React Native 应用程序并收到以下错误:
SyntaxError: C:\Users\Ori\Desktop\Projects\React\my-app\node_modules@react-native-community\google-signin\src\GoogleSignin.js:支持实验性语法“classProperties” t 当前启用 (8:16)
将 @babel/plugin-proposal-class-properties (https://git.io/vb4SL) 添加到 Babel 配置的“插件”部分以启用转换。
如果我理解正确,因为它是一个 react native 应用程序,所以 .babelrc 文件会被忽略,但仍有一些方法可以克服这个问题。我在网上看到了一些解决方案,但似乎没有一个对我有用。
我试过了:
将 babel.config.js 添加到与 package.json 相同的文件夹中:module.exports =
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript'
],
plugins: [
'@babel/plugin-proposal-class-properties'
]
;
在 package.json 中添加 babel 配置
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',
],
;
如果有人能阐明这个问题,那就太好了,谢谢!
【问题讨论】:
【参考方案1】:根据 [this GitHub][1] 问题,如果您使用 create-react-app,您应该将您的 .babelrc
或 babel.config.js
配置复制到 webpack.config.js
并删除这些。因为 htis 有两行代码 @987654324 @您在 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。
或者您可以弹出并执行此操作。
【讨论】:
以上是关于当前未启用对实验语法“classProperties”的支持 (8:16)。添加@babel/plugin-proposal-class-properties的主要内容,如果未能解决你的问题,请参考以下文章
SyntaxError:当前未启用对实验性语法“jsx”的支持
"loose": true is not fix 对实验性语法 'classProperties' 的支持当前未启用
Babel throwing 当前未启用对实验性语法“jsx”的支持