[英]Support for the experimental syntax 'classProperties' isn't currently enabled error on a React.js
When I am trying to use react-native-vector-icon
with a React Project build with react-native-web
, I am getting当我尝试将
react-native-vector-icon
与使用react-native-web
构建的 React Project 一起使用时,我得到了
Support for the experimental syntax 'classProperties' isn't currently enabled
当前未启用对实验语法“classProperties”的支持
I have tried the following solution but none of those working for me.我尝试了以下解决方案,但没有一个对我有用。
My package.json我的package.json
{
"name": "react-webiste",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.19.2",
"fsevents": "^2.1.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-native": "^0.62.1",
"react-native-svg": "^12.1.0",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.12.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.0.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"
]
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.8.3"
}
}
babel.config.js babel.config.js
module.exports = {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["@babel/plugin-proposal-class-properties",{"loose": true}]
};
Can anyone please suggest me what should I do to fix this issue.谁能建议我该怎么做才能解决此问题。
EDIT: It seems like your issue is a current problem with the library owner.编辑:您的问题似乎是图书馆所有者当前的问题。 The library is built for
react-native
where users are used to manually transpile.该库是为
react-native
构建的,用户用于手动转译。 You can find the GitHub project issue here您可以在此处找到 GitHub 项目问题
However, as some users suggest, you could try to use config-overrides.js
, adding resolveApp('../node_modules/react-native-vector-icons')
to your bundling step like described in this GitHub comment .但是,正如一些用户建议的那样,您可以尝试使用
config-overrides.js
,将resolveApp('../node_modules/react-native-vector-icons')
添加到您的捆绑步骤中,如此 GitHub 评论中所述。
In order to use config-overrides
, you should migrate to react-app-rewired
( https://github.com/timarney/react-app-rewired ).为了使用
config-overrides
,您应该迁移到react-app-rewired
rewired ( https://github.com/timarney/react-app-rewired )。
I'll paste the config-overrides changes for future reference, kudos to jookovjok
, and he's full config-overrides.js :我将粘贴 config-overrides 更改以供将来参考,对
jookovjok
,他是完整的config-overrides.js :
const appIncludes = [
...
resolveApp('../node_modules/react-native-vector-icons') // <- HERE
]
...
config.module.rules[2].oneOf[1].options.plugins = [
...
require.resolve('@babel/plugin-proposal-class-properties') // <- HERE
]...
Old answer before edit:编辑前的旧答案:
Have you pasted correctly the babel.config.js
?您是否正确粘贴了
babel.config.js
? It seems to me your plugins
declaration is mispelled:在我看来,您的
plugins
声明拼写错误:
Change the plugins line to: (removing the extra t
):将 plugins 行更改为:(删除额外的
t
):
plugins: ["@babel/plugin-proposal-class-properties", {"loose": true}]
In the general case, all the babel configuration can be passed down from babel.config.js
or any other supported formate files.在一般情况下,所有 babel 配置都可以从
babel.config.js
或任何其他支持的格式文件传递下来。 But in my case, babel-loader
in the webpack.config.js
has its own option as a result of which all configuration were overwritten as described by Babel team on Github Comment.但就我而言,
webpack.config.js
中的babel-loader
有自己的选项,因此所有配置都被 Babel 团队在 Github 评论中描述的那样覆盖。
Secondly, I used metro-react-native-babel-preset
instead of @babel/plugin-proposal-class-properties
which took care of the babel missing issue.其次,我使用
metro-react-native-babel-preset
而不是@babel/plugin-proposal-class-properties
来解决 babel 缺失问题。
Here is my Webpack Config after ejecting the application:这是弹出应用程序后我的Webpack 配置:
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
// Added the module here
presets: [
[
require.resolve('babel-preset-react-app/dependencies'),
{ helpers: true },
],["module:metro-react-native-babel-preset"]
],
// More configuration codes goes here
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
enforce: 'pre',
use: [
{
options: {
cache: true,
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
resolvePluginsRelativeTo: __dirname,
},
loader: require.resolve('eslint-loader'),
},
],
include:[ //Change here as well
paths.appSrc,
path.resolve('node_modules/react-native-vector-icons'),
]
},
Once all these done, react-native-vector-icon
will render but nothing will load.一旦完成所有这些,
react-native-vector-icon
将呈现但不会加载任何内容。 For that we need to add the below styles into the App.css
or any root style sheet.为此,我们需要将以下 styles 添加到
App.css
或任何根样式表中。
/*Import the Icon CSS*/
@font-face {
font-family: "Entypo";
src: url("~react-native-vector-icons/Fonts/Entypo.ttf") format("truetype");
}
@font-face {
font-family: "EvilIcons";
src: url("~react-native-vector-icons/Fonts/EvilIcons.ttf") format("truetype");
}
@font-face {
font-family: "FontAwesome";
src: url("~react-native-vector-icons/Fonts/FontAwesome.ttf")
format("truetype");
}
@font-face {
font-family: "fontcustom";
src: url("~react-native-vector-icons/Fonts/Foundation.ttf") format("truetype");
}
@font-face {
font-family: "Ionicons";
src: url("~react-native-vector-icons/Fonts/Ionicons.ttf") format("truetype");
}
@font-face {
/*font-family: 'MaterialCommunityIcons';*/
font-family: "Material Design Icons";
src: url("~react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf")
format("truetype");
}
@font-face {
font-family: "MaterialIcons";
src: url("~react-native-vector-icons/Fonts/MaterialIcons.ttf")
format("truetype");
}
@font-face {
font-family: "Octicons";
src: url("~react-native-vector-icons/Fonts/Octicons.ttf") format("truetype");
}
@font-face {
font-family: "simple-line-icons";
src: url("~react-native-vector-icons/Fonts/SimpleLineIcons.ttf")
format("truetype");
}
@font-face {
font-family: "Zocial";
src: url("~react-native-vector-icons/Fonts/Zocial.ttf") format("truetype");
}
I tried a lot of things across multiple days.我在几天内尝试了很多东西。 What finally solved it for me to make
classProperties
work on react-native-web was following this simple guide for a very popular repo: https://reactnativeelements.com/docs/web_usage/最终为我解决了让
classProperties
在 react-native-web 上工作的问题是遵循这个简单的指南以获得一个非常受欢迎的 repo: https://reactnativeelements.com/docs/web_usage/
You have to add the package that causing problems for you (react-native-vector-icons) in the file config-overrides.js
:您必须在文件
config-overrides.js
中添加对您造成问题的 package(react-native-vector-icons):
const path = require('path');
const { override, addBabelPlugins, babelInclude } = require('customize-cra');
module.exports = override(
...addBabelPlugins('@babel/plugin-proposal-class-properties'),
babelInclude([
path.resolve(__dirname, 'node_modules/react-native-elements'),
path.resolve(__dirname, 'node_modules/react-native-vector-icons'),
path.resolve(__dirname, 'node_modules/react-native-ratings'),
path.resolve(__dirname, 'src'),
])
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.