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

本文介绍了react-native-web:编译失败(react-native-vector-icons)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

构建 react-native-web 时，出现以下错误:

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

我在 .babelrc 文件

{
  "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 }]
  ]
}

任何人都可以帮忙吗?

推荐答案

对我来说，将.babelrc配置移动到webconfig上非常有用，webconfig看起来像这样

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'
  }
]

这篇关于react-native-web:编译失败(react-native-vector-icons)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！