webpack 带有react-native-vector-icons的React NativeWeb错误

c9x0cxw0  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(156)

我正在制作一个带有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,但还是出现了同样的错误

6jygbczu

6jygbczu1#

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

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

lp0sw83n2#

我刚刚遇到了完全相同的问题,我通过在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")
      }
  ]
}
...

相关问题