React Native Web 错误与 react-native-vector-icons答案

【问题标题】：React Native Web error with react-native-vector-iconsReact Native Web 错误与 react-native-vector-icons
【发布时间】：2022-10-05 10:33:06
【问题描述】：

我正在使用 react-native 和 react-native-web 制作应用程序。我已尝试将 react-native-vector-icons 添加到项目中，请遵循此documentation，但在 Web 构建时出现错误：

ERROR in ./node_modules/react-native-vector-icons/lib/create-icon-set.js 91:8
Module parse failed: Unexpected token (91:8)
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
| 
|       return (
>         <Text selectable={false} {...props}>
|           {glyph}
|           {children}
 @ ./node_modules/react-native-vector-icons/FontAwesome.js 6:0-50 9:16-29
 @ ./src/App.js 1:1549-1597
 @ ./index.web.js 1:261-281

这是我的 webpack.config.js：

const path = require(\'path\')
const webpack = require(\'webpack\')
const HtmlWebpackPlugin = require(\'html-webpack-plugin\')
const CopyWebpackPlugin = require(\'copy-webpack-plugin\')

const appDirectory = path.resolve(__dirname, \'../\')

const babelLoaderConfiguration = {
  test: /\\.(js)|(jsx)$/,
  include: [
    path.resolve(appDirectory, \'index.web.js\'),
    path.resolve(appDirectory, \'src\'),
    path.resolve(appDirectory, \'node_modules/react-native-uncompiled\'),
  ],
  use: {
    loader: \'babel-loader\',
    options: {
      cacheDirectory: true,
      presets: [\'module:metro-react-native-babel-preset\'],
      plugins: [
        \'react-native-web\',
        [
          \'module-resolver\',
          {
            alias: {
              \'^react-native$\': \'react-native-web\',
            },
          },
        ],
      ],
    },
  },
}

const HtmlWebpackPluginConfig = {
  filename: \'index.html\',
  template: path.resolve(appDirectory, \'index.html\'),
}

const copyWebpackPluginConfig = {
  patterns: [
    {
      from: path.resolve(appDirectory, \'assets/fonts/\'),
      to: path.resolve(appDirectory, \'public/assets/fonts\'),
      noErrorOnMissing: true,
    },
    {
      from: path.resolve(appDirectory, \'assets/images/\'),
      to: path.resolve(appDirectory, \'public/assets/images\'),
      noErrorOnMissing: true,
    },
  ],
}

const imageLoaderConfiguration = {
  test: /\\.(gif|jpe?g|png|svg)$/,
  use: {
    loader: \'url-loader\',
    options: {
      name: \'[name].[ext]\',
      esModule: false,
    },
  },
}

const iconFontLoaderConfiguration = {
  test: /\\.ttf$/,
  loader: \'url-loader\', // or directly file-loader
  include: path.resolve(appDirectory, \'node_modules/react-native-vector-icons\'),
}

module.exports = {
  entry: [path.resolve(appDirectory, \'index.web.js\')],

  output: {
    filename: \'bundle.[contenthash].web.js\',
    path: path.resolve(appDirectory, \'public\'),
  },

  module: {
    rules: [
      babelLoaderConfiguration,
      imageLoaderConfiguration,
      iconFontLoaderConfiguration,
    ],
  },

  devServer: {
    host: \'0.0.0.0\',
  },

  plugins: [
    new HtmlWebpackPlugin(HtmlWebpackPluginConfig),
    new CopyWebpackPlugin(copyWebpackPluginConfig),
  ],

  resolve: {
    alias: {
      \'react-native$\': \'react-native-web\',
      \'@api\': path.resolve(appDirectory, \'src/api/\'),
      \'@entities\': path.resolve(appDirectory, \'src/entities/\'),
      \'@utils\': path.resolve(appDirectory, \'src/utils/\'),
      \'@components\': path.resolve(appDirectory, \'src/components/\'),
      \'@theme\': path.resolve(appDirectory, \'src/theme/\'),
      \'@constants\': path.resolve(appDirectory, \'src/constants/\'),
      \'@screens\': path.resolve(appDirectory, \'src/screens\'),
    },

    extensions: [\'.web.js\', \'.js\', \'.jsx\'],
  },
}

我也尝试将 url-loader 更改为 file-loader 和 ttf-loader 我得到了同样的错误

标签： react-native webpack react-native-vector-icons

【解决方案1】：

在 webpack.config.js 文件中粘贴以下代码

   module: {          
                {
                  test: /\.ttf$/,
                  loader: 'url-loader', // or directly file-loader
                  include: path.resolve(
                    __dirname,
                    'node_modules/react-native-vector-icons',
                  ),
                },
        },

【讨论】：

【解决方案2】：

我刚刚遇到了完全相同的麻烦，我通过在webpack.config.js 文件中添加这两个规则来解决

...
module: {
  rules: [
    ...
      {
        test: /\.js$/,
        exclude: /node_modules\/(?!(react-native-elements|react-native-vector-icons)\/).*/,
        loader: 'babel-loader'
      },
      {
        test: /\.ttf$/,
        loader: 'url-loader',
        include: path.resolve(__dirname, "node_modules/react-native-vector-icons")
      }
  ]
}
...

【讨论】：