Javascript 支持实验语法'；classProperties'；isn'；t React.js上当前启用的错误

当我试图使用

react native vector图标

与带有

react native web

的react项目构建一起使用时，我得到了

目前不支持实验语法“classProperties” 启用

我尝试过以下解决方案，但没有一个是适合我的

Mypackage.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

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: ["@babel/plugin-proposal-class-properties",{"loose": true}]
};

---

谁能建议我应该怎么做来解决这个问题

编辑：您的问题似乎是当前图书馆所有者的问题。该库是为

react native

而构建的，其中用户用于手动传输。你可以找到

但是，正如一些用户所建议的，您可以尝试使用

config overrides.js

，将

resolveApp（'../node\u modules/react native vector icons'）

添加到绑定步骤中，如

要使用

配置覆盖

，您应该迁移到

react app rewired

（）

我将粘贴配置覆盖更改以供将来参考，感谢jookovjok，他已经满了：

---

在一般情况下，所有babel配置都可以从

babel.config.js

或任何其他受支持的格式文件中传递。但是在我的例子中，

webpack.config.js

中的

babel loader

有自己的选项，因此所有配置都被覆盖为

其次，我使用了

metro-react-native-babel-preset

，而不是

@babel/plugin-proposition-class-properties

，它解决了babel缺失的问题

弹出应用程序后，以下是我的网页包配置：

   {
       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'),
         ]
       },

完成所有这些操作后，

react native vector icon

将进行渲染，但不会加载任何内容。为此，我们需要将以下样式添加到

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");
}

---

我在几天内尝试了很多东西。对于我来说，让

classProperties

在react native web上工作最终解决了这个问题，这是一个非常流行的repo的简单指南：

您必须在文件

config overrides.js

中添加给您造成问题的包（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'),
  ])
);

---

您在babel.config.js

@babel/plugin提案类属性

应该是

@babel/plugin提案类属性

@ArdyFebriansyah，是的，很抱歉我在这里打错了。但是在代码中，它是

@babel/plugin-proposition-class-properties

它仍然是一样的，我可能在这里键入时拼写错误，但在代码中它是一样的。似乎这些步骤不起作用，因为react-webpack配置中的

babel loader

中的选项正在覆盖babel配置。

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'),
  ])
);