Поддержка экспериментального синтаксиса classProperties в настоящее время не включена ошибка React. js

Question

Когда я пытаюсь использовать react-native-vector-icon со сборкой React Project с react-native-web, я получаю

Поддержка экспериментального синтаксиса classProperties в настоящее время не включена

Я испробовал следующее решение, но ни один из тех, кто работает на меня,

1. Поддержка экспериментального синтаксиса 'classProperties' в настоящее время не включена
2. Свойства класса подключаемого модуля Babel - функции React Arrow
3. "Свободно": true не исправляет Поддержка экспериментального синтаксиса 'classProperties' в настоящее время не включена

Мой пакет. 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}]
};

Может кто-нибудь предложить мне, что я должен сделать, чтобы решить эту проблему.

Answer 1

РЕДАКТИРОВАТЬ: Кажется, что ваша проблема является текущей проблемой с владельцем библиотеки. Библиотека построена для react-native, где пользователи используются для переноса вручную. Вы можете найти проблему проекта GitHub здесь

Однако, как предлагают некоторые пользователи, вы можете попробовать использовать config-overrides.js, добавив resolveApp('../node_modules/react-native-vector-icons') к вашему шагу связывания, как , описанный в этот комментарий GitHub .

Чтобы использовать config-overrides, вы должны перейти на react-app-rewired (https://github.com/timarney/react-app-rewired).

Я вставлю переопределения конфигурации изменяются для использования в будущем, слава jookovjok, и он полон переопределений конфигурации. 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
    ]...

Старый ответ перед редактированием:

Правильно ли вы вставили babel.config.js? Мне кажется, ваше plugins объявление введено неправильно:

Измените строку плагинов на: (удаляя лишние t):

plugins: ["@babel/plugin-proposal-class-properties", {"loose": true}]

Answer 2

В общем случае вся конфигурация babel может быть передана из babel.config.js или любых других поддерживаемых форматных файлов. Но в моем случае babel-loader в webpack.config.js имеет свою собственную опцию, в результате чего вся конфигурация была перезаписана как , описанная командой Babel на Github Comment.

Во-вторых, я использовал metro-react-native-babel-preset вместо @babel/plugin-proposal-class-properties, который позаботился о проблеме пропавшей бабели.

Вот мой Webpack Config после удаления приложения:

   {
       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 или любую root.

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