search

oblador / react-native-vector-icons

Customizable Icons for React Native with support for image source and full styling.
https://oblador.github.io/react-native-vector-icons/
MIT License
17.31k stars 2.12k forks source link

Unable to use in react-native-web #1509

Closed SupriyaGo closed 11 months ago

SupriyaGo commented 1 year ago

Environment

web

Description

I have a react-native app, which I am running on the web and Android. vector-icon is perfectly working in Android but gives errors in the web version.

Compiled with problems:
×
ERROR in ./node_modules/react-native-vector-icons/lib/create-icon-set.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\Projects\POC's\zingPoc\node_modules\react-native-vector-icons\lib\create-icon-set.js: Support for the experimental syntax 'jsx' isn't currently enabled (91:9):

  89 |
  90 |       return (
> 91 |         <Text selectable={false} {...props}>
     |         ^
  92 |           {glyph}
  93 |           {children}
  94 |         </Text>

Add @babel/preset-react (https://github.com/babel/babel/tree/main/packages/babel-preset-react) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-jsx) to the 'plugins' section to enable parsing.
    at instantiate (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:63:32)
    at constructor (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:358:12)
    at Parser.raise (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:3255:19)
    at Parser.expectOnePlugin (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:3301:18)
    at Parser.parseExprAtom (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:11245:18)
    at Parser.parseExprSubscripts (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10890:23)
    at Parser.parseUpdate (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10873:21)
    at Parser.parseMaybeUnary (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10849:23)
    at Parser.parseMaybeUnaryOrPrivate (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10687:61)
    at Parser.parseExprOps (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10692:23)
    at Parser.parseMaybeConditional (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10669:23)
    at Parser.parseMaybeAssign (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10630:21)
    at D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10600:39
    at Parser.allowInAnd (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12280:12)
    at Parser.parseMaybeAssignAllowIn (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10600:17)
    at Parser.parseParenAndDistinguishExpression (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:11513:28)
    at Parser.parseExprAtom (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:11164:23)
    at Parser.parseExprSubscripts (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10890:23)
    at Parser.parseUpdate (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10873:21)
    at Parser.parseMaybeUnary (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10849:23)
    at Parser.parseMaybeUnaryOrPrivate (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10687:61)
    at Parser.parseExprOps (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10692:23)
    at Parser.parseMaybeConditional (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10669:23)
    at Parser.parseMaybeAssign (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10630:21)
    at Parser.parseExpressionBase (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10584:23)
    at D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10580:39
    at Parser.allowInAnd (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12275:16)
    at Parser.parseExpression (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:10580:17)
    at Parser.parseReturnStatement (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12999:28)
    at Parser.parseStatementContent (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12617:21)
    at Parser.parseStatementLike (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12584:17)
    at Parser.parseStatementListItem (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12564:17)
    at Parser.parseBlockOrModuleBlockBody (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13185:61)
    at Parser.parseBlockBody (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13178:10)
    at Parser.parseBlock (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13166:10)
    at Parser.parseFunctionBody (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:11947:24)
    at Parser.parseFunctionBodyAndFinish (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:11933:10)
    at Parser.parseMethod (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:11891:31)
    at Parser.pushClassMethod (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13621:30)
    at Parser.parseClassMemberWithIsStatic (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13493:12)
    at Parser.parseClassMember (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13437:10)
    at D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13387:14
    at Parser.withSmartMixTopicForbiddingContext (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12257:14)
    at Parser.parseClassBody (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13367:10)
    at Parser.parseClass (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13345:22)
    at Parser.parseStatementContent (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12613:21)
    at Parser.parseStatementLike (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12584:17)
    at Parser.parseStatementListItem (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:12564:17)
    at Parser.parseBlockOrModuleBlockBody (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13185:61)
    at Parser.parseBlockBody (D:\Projects\POC's\zingPoc\node_modules\@babel\parser\lib\index.js:13178:10)

I am using babel.config.js

module.exports = function (api) {
  const presets = ['module:metro-react-native-babel-preset'];

  const plugins = [
    '@babel/plugin-syntax-jsx', // Add this line
  ];

  return {
    presets,
    plugins,
  };
};

My package.json

{
  "name": "TextProj",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "web": "react-scripts start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/drawer": "^6.6.3",
    "@react-navigation/native": "^6.1.7",
    "@react-navigation/native-stack": "^6.9.13",
    "native-base": "^3.4.28",
    "react": "18.2.0",
    "react-dom": "^18.2.0",
    "react-native": "0.72.0",
    "react-native-safe-area-context": "^3.3.2",
    "react-native-screens": "^3.22.0",
    "react-native-svg": "^12.1.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-web": "^0.18.10"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-syntax-jsx": "^7.22.5",
    "@babel/preset-env": "^7.20.0",
    "@babel/preset-react": "^7.22.5",
    "@babel/runtime": "^7.22.5",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.6",
    "@tsconfig/react-native": "^3.0.0",
    "@types/metro-config": "^0.76.3",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "babel-plugin-react-native-web": "^0.19.5",
    "eslint": "^8.19.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-native": "^4.0.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.5",
    "prettier": "^2.4.1",
    "react-scripts": "^5.0.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Code where I am using

import React from 'react';

import { Box } from 'native-base';
import Icon from 'react-native-vector-icons/FontAwesome';

export default function Sidebar(props) {
  return (
    <Box {...props} shadow={1} bg="white" mt={1} h="100%" p={4} alignItems="center">
      <Box>
        <Icon name="home" size={24} color="black" />
      </Box>
    </Box>
  );
}

Please help !!!

johnf commented 11 months ago

Please refer to the react-native-web section in the readme. You need to import the compiled version of the lib in dist directly.