"export 'ErrorFragment' was not found in '@ethersproject/abi' using react-native with Magic Link Authetntication

./node_modules/moralis/node_modules/ethers/lib.esm/utils.js:29
"export 'ErrorFragment' was not found in '@ethersproject/abi'
  27 | ////////////////////////
  28 | // Exports
> 29 | export { AbiCoder, defaultAbiCoder, Fragment, ConstructorFragment, ErrorFragment, EventFragment, FunctionFragment, ParamType, FormatTypes, checkResultErrors, Logger, RLP, _fetchData, fetchJson, poll, checkProperties, deepCopy, defineReadOnly, getStatic, resolveProperties, shallowCopy, arrayify, concat, stripZeros, zeroPad, isBytes, isBytesLike, defaultPath, HDNode, SigningKey, Interface, LogDescription, TransactionDescription, base58, base64, hexlify, isHexString, hexConcat, hexStripZeros, hexValue, hexZeroPad, hexDataLength, hexDataSlice, nameprep, _toEscapedUtf8String, toUtf8Bytes, toUtf8CodePoints, toUtf8String, Utf8ErrorFuncs, formatBytes32String, parseBytes32String, hashMessage, namehash, isValidName, id, _TypedDataEncoder, getAddress, getIcapAddress, getContractAddress, getCreate2Address, isAddress, formatEther, parseEther, formatUnits, parseUnits, commify, computeHmac, keccak256, ripemd160, sha256, sha512, randomBytes, shuffled, solidityPack, solidityKeccak256, soliditySha256, splitSignature, joinSignature, accessListify, parseTransaction, serializeTransaction, TransactionTypes, getJsonWalletAddress, computeAddress, recoverAddress, computePublicKey, recoverPublicKey, verifyMessage, verifyTypedData, getAccountPath, mnemonicToEntropy, entropyToMnemonic, isValidMnemonic, mnemonicToSeed,
  30 | ////////////////////////
  31 | // Enums
  32 | SupportedAlgorithm, UnicodeNormalizationForm, Utf8ErrorReason, Indexed };
./node_modules/magic-sdk/dist/es/index.js:1:227
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
> 1 | var Zr=Object.create;var De=Object.defineProperty;var qr=Object.getOwnPropertyDescriptor;var kr=Object.getOwnPropertyNames;var et=Object.getPrototypeOf,rt=Object.prototype.hasOwnProperty;var tt=p=>De(p,"__esModule",{value:!0});var ve=(p=>typeof require!="undefined"?require:typeof Proxy!="undefined"?new Proxy(p,{get:(g,O)=>(typeof require!="undefined"?require:g)[O]}):p)(function(p){if(typeof require!="undefined")return require.apply(this,arguments);throw new Error('Dynamic require of "'+p+'" is not supported')});var $e=(p,g)=>()=>(g||p((g={exports:{}}).exports,g),g.exports);var nt=(p,g,O,L)=>{if(g&&typeof g=="object"||typeof g=="function")for(let M of kr(g))!rt.call(p,M)&&(O||M!=="default")&&De(p,M,{get:()=>g[M],enumerable:!(L=qr(g,M))||L.enumerable});return p},Ze=(p,g)=>nt(tt(De(p!=null?Zr(et(p)):{},"default",!g&&p&&p.__esModule?{get:()=>p.default,enumerable:!0}:{value:p,enumerable:!0})),p);var se=(p,g,O)=>new Promise((L,M)=>{var Q=S=>{try{Y(O.next(S))}catch(P){M(P)}},C=S=>{try{Y(O.throw(S))}catch(P){M(P)}},Y=S=>S.done?L(S.value):Promise.resolve(S.value).then(Q,C);Y((O=O.apply(p,g)).next())});var ke=$e((qe,Ne)=>{(function(p){if(typeof qe=="object"&&typeof Ne!="undefined")Ne.exports=p();else if(typeof define=="function"&&define.amd)define([],p);else{var g;typeof window!="undefined"?g=window:typeof global!="undefined"?g=global:typeof self!="undefined"?g=self:g=this,g.localforage=p()}})(function(

Please provide more information. Thank you.

what kind of info you need sir

import React, { useState, createRef, useRef, useEffect } from "react";


import {
  StyleSheet,
  TextInput,
  View,
  Text,
  ScrollView,
  Image,
  Keyboard,
  TouchableOpacity,
  KeyboardAvoidingView,
  Linking,
  Animated,
  Dimensions,
  ImageBackground,
} from "react-native";
import {
  Button,
  Paragraph,
  Dialog,
  Portal,
  Provider,
  ActivityIndicator,
} from "react-native-paper";
import {Input} from 'react-native-elements'





import {
  useMoralis,
  useMoralisWeb3Api,
  useMoralisWeb3ApiCall, 
} from "react-moralis";
import { useWalletConnect } from "../../../WalletConnect";
import LottieView from "lottie-react-native";

import AsyncStorage from "@react-native-async-storage/async-storage";
import Animation from "../../../splashLottie.json";
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";

// import Loader from './Components/Loader';

 const SCREEN_HEIGHT: number = Math.round(Dimensions.get('window').height)
 const SCREEN_WIDTH: number = Math.round(Dimensions.get('window').width)


const LoginScreen = ({navigation}) => {
  const connector = useWalletConnect();
  const {
    authenticate,
    authError,
    isAuthenticating,
    isAuthenticated,
    logout,
    Moralis,
  } = useMoralis();

  const [email, setEmail] = useState("");
  const [userPassword, setUserPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [errortext, setErrortext] = useState("");
  const [visible, setVisible] = React.useState(false);

  const showDialog = () => setVisible(true);

  const hideDialog = () => setVisible(false);

  const passwordInputRef = createRef();
  
   
  const handleCustomLogin = async () => {
    await authenticate({
      provider: "magicLink",
      email: email,
      apiKey: " pk_live_8ABCEDAA72407E22",
     
      network: "kovan",
    });
  };
  useEffect(() => {
    isAuthenticated && navigation.navigate("Home");
  }, [isAuthenticated]);

  return (
    <Provider>
      <View style={styles.mainBody}>
      <KeyboardAwareScrollView enableOnAndroid={true} >
       
          <Image
            style={{ flex: 1 }}
            source={require("../../../assets/Ize-png.png")}
          />
          <View style={{ flex: 1 }}>
            
              <View style={{
              
                 alignItems: "center" }}>
                <LottieView source={Animation} loop autoPlay />
                <Image
                  source={require("../../../assets/IzeBho-real.png")}
                  style={{
                    width: "50%",
                    height: 100,
                    resizeMode: "contain",
                    margin: 30,
                  }}
                />
              </View> 

              <View>
                {authError && (
                  <Portal>
                    <Dialog visible={visible} onDismiss={hideDialog}>
                      <Dialog.Title>Authentication error:</Dialog.Title>
                      <Dialog.Content>
                        <Paragraph>
                          {authError ? authError.message : ""}
                        </Paragraph>
                      </Dialog.Content>
                      <Dialog.Actions>
                        <Button onPress={hideDialog}>Done</Button>
                      </Dialog.Actions>
                    </Dialog>
                  </Portal>
                )}
                {isAuthenticating && (
                  <ActivityIndicator animating={true} color={"#694fad"} />
                )}
              </View>
<View>
<Input
         
          style={styles.input}
          placeholder="Email"
          value={email}
          onChangeText={setEmail}
        />
</View>
              <TouchableOpacity
                style={styles.buttonStyle}
                activeOpacity={0.5}
                onPress={handleCustomLogin}>
                <Text style={styles.buttonTextStyle}> Login or Signup</Text>
              </TouchableOpacity>
          </View>
        
        </KeyboardAwareScrollView>
      </View>
    </Provider>
  );
};
export default LoginScreen;

const styles = StyleSheet.create({
  mainBody: {
    flex: 1,
    justifyContent: "center",
    backgroundColor: "#e7eaf3",
    alignContent: "center",
  },
  SectionStyle: {
    flexDirection: "row",
    height: 40,
    marginTop: 20,
    marginLeft: 35,
    marginRight: 35,
    margin: 10,
  },
  buttonStyle: {
    backgroundColor: "#694fad",
    borderWidth: 0,
    color: "#e7eaf3",
    borderColor: "#694fad",
    height: 40,
    alignItems: "center",
    borderRadius: 30,
    marginLeft: 35,
    marginRight: 35,
    marginTop: 20,
    marginBottom: 25,
  },
  buttonTextStyle: {
    color: "#e7eaf3",
    paddingVertical: 10,
    fontSize: 16,
    fontWeight: "600",
  },
  inputStyle: {
    flex: 1,
    color: "white",
    paddingLeft: 15,
    paddingRight: 15,
    borderWidth: 1,
    borderRadius: 30,
    borderColor: "#dadae8",
  },

  errorTextStyle: {
    color: "red",
    textAlign: "center",
    fontSize: 14,
  },
  input: {
    padding: 10,
    borderRadius: 20,
    marginBottom: 20,
  }

});






when i hover on it

(property) AuthenticateOptions.provider?: Web3Provider
Type '"magicLink"' is not assignable to type 'Web3Provider'.ts(2322)
_useMoralisAuth.d.ts(40, 5): The expected type comes from property 'provider' which is declared here on type 'AuthenticateOptions'

image

my package.json
 "magic-sdk": "^8.0.1",

 "moralis": "1.2.4",

 "react-moralis": "1.2.1",


hellooooooooooooooooooooo
am waiting sir

or is it that, i can not use it on react-native yet ?, why are you silent

We don’t have integration of Magic Authentication with react native yet. Will let you know when we officially release and with proper documentation.

okay sir, please i cant wait,