我正在制作一个带有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,但还是出现了同样的错误
2条答案
按热度按时间6jygbczu1#
在webpack.config.js文件中粘贴以下代码
lp0sw83n2#
我刚刚遇到了完全相同的问题,我通过在
webpack.config.js
文件中添加这两条规则解决了这个问题