react-native-web: 编译失败 (react-native-vector-icons)

Question

When building react-native-web , the error below appears:

ERROR in ./node_modules/react-native-vector-icons/lib/create-icon-set.js 43:21
Module parse failed: Unexpected token (43:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
|   class Icon extends PureComponent {
>     static propTypes = {
|       allowFontScaling: PropTypes.bool,
|       name: IconNamePropType,
 @ ./node_modules/react-native-vector-icons/AntDesign.js 6:0-50 9:16-29
 @ ./src/containers/news/index.js
 @ ./src/App.js
 @ ./src/index.js

And I have this section under .babelrc file

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "@babel/preset-typescript",
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    ["module-resolver", {
      "alias": {
        "^react-native$": "react-native-web"
      }
    }],
    "@babel/plugin-transform-runtime",
    ["@babel/plugin-proposal-class-properties", { "loose": true }]
  ]
}

Can anyone help ?

Answer 1

It worked for me moving the .babelrc configuration to the webconfig, the webconfig looks like this

rules: [
  {
    test: /\.(js|jsx)$/,
    loader: 'babel-loader',
    options: {
      presets: [
        '@babel/preset-env',
        "@babel/preset-react",
        {
          plugins: [
            '@babel/plugin-proposal-class-properties'
          ]
        }
      ]
    },
  },
  {
    test: /\.css$/,
    loader: 'style-loader!css-loader'
  }
]