oktaysenkan / monicon

Universal Icon Library
https://monicon-docs.vercel.app
247 stars 9 forks source link

Still getting "Need to install a Babel plugin" even after adding to babel.config.js #11

Closed GustavoMelloGit closed 8 months ago

GustavoMelloGit commented 8 months ago

App using Expo

babel.config.js

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-iconify/plugin',
    ],
  };
};

package.json

{
  "name": "turmeiro",
  "version": "1.0.0",
  "main": "expo-router/entry",
  "scripts": {
    "start": "expo start",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "lint": "eslint ."
  },
  "dependencies": {
    "@hookform/resolvers": "^3.3.4",
    "@react-native-async-storage/async-storage": "1.21.0",
    "@supabase/supabase-js": "^2.39.3",
    "expo": "^50.0.4",
    "expo-constants": "~15.4.5",
    "expo-image": "~1.10.5",
    "expo-image-picker": "~14.7.1",
    "expo-linking": "~6.2.2",
    "expo-router": "^3.4.6",
    "expo-secure-store": "~12.8.1",
    "expo-status-bar": "~1.11.1",
    "react": "18.2.0",
    "react-hook-form": "^7.49.3",
    "react-native": "0.73.2",
    "react-native-iconify": "^1.0.0",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-svg": "14.1.0",
    "react-native-toast-message": "^2.2.0",
    "react-native-url-polyfill": "^2.0.0",
    "zod": "^3.22.4"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.2.45",
    "typescript": "^5.3.3"
  },
  "private": true
}

Full Error:

Error: Iconify: You need to install a Babel plugin before using this library. You can continue by adding the following to your babel.config.js

This error is located at:
    in Iconify (at Avatar.tsx:15)
    in RCTView (at View.js:116)
    in View (at Avatar.tsx:14)
    in Avatar (at Profile.tsx:10)
    in RCTView (at View.js:116)
    in View (at createAnimatedComponent.js:54)
    in Unknown (at TouchableOpacity.js:256)
    in TouchableOpacity (at TouchableOpacity.js:323)
    in TouchableOpacity (at ImagePicker.tsx:30)
    in ImagePicker (at Profile.tsx:10)
    in RCTView (at View.js:116)
    in View (at Profile.tsx:9)
    in RCTSafeAreaView (at Profile.tsx:8)
    in Profile (at profile.tsx:4)
    in ProfilePage (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route(profile) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in QualifiedSlot (at Navigator.js:103)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at Navigator.js:72)
    in QualifiedNavigator (at Navigator.js:52)
    in Navigator (at Navigator.js:102)
    in Slot (at _layout.tsx:18)
    in AppLayout (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route((app)) (at SceneView.tsx:132)
    in StaticContainer
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:218)
    in QualifiedSlot (at Navigator.js:103)
    in PreventRemoveProvider (at useNavigationBuilder.tsx:718)
    in NavigationContent (at useComponent.tsx:35)
    in Unknown (at Navigator.js:72)
    in QualifiedNavigator (at Navigator.js:52)
    in Navigator (at Navigator.js:102)
    in Slot (at _layout.tsx:8)
    in AuthContextProvider (at _layout.tsx:7)
    in RootLayout (at useScreens.js:112)
    in Unknown (at useScreens.js:116)
    in Suspense (at useScreens.js:115)
    in Route (at useScreens.js:131)
    in Route() (at ExpoRoot.js:90)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:92)
    in SafeAreaProvider (at ExpoRoot.js:55)
    in wrapper (at ExpoRoot.js:89)
    in EnsureSingleNavigator (at BaseNavigationContainer.tsx:430)
    in BaseNavigationContainer (at NavigationContainer.native.js:105)
    in ThemeProvider (at NavigationContainer.native.js:104)
    in NavigationContainerInner (at ExpoRoot.js:86)
    in ContextNavigator (at ExpoRoot.js:64)
    in ExpoRoot (at qualified-entry.js:20)
    in App (created by ErrorOverlay)
    in ErrorToastContainer (created by ErrorOverlay)
    in ErrorOverlay (at withDevTools.ios.js:25)
    in withDevTools(ErrorOverlay) (at renderApplication.js:57)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:127)
    in RCTView (at View.js:116)
    in View (at AppContainer.js:155)
    in AppContainer (at renderApplication.js:50)
    in main(RootComponent) (at renderApplication.js:67), js engine: hermes
oktaysenkan commented 8 months ago

Hi, did you reset Metro bundler?

Sami1ullah123 commented 8 months ago

Hi, you can solve it by reseting the cache pf the metro bundler using npm start --reset-cache

oktaysenkan commented 8 months ago

@GustavoMelloGit any update?