React Native Expo integration bug

Hello! I'm trying currently to do a basic integration of web3auth for a PoC. I have mostly ripped out what I got from the integration builder. However it would appear there might be a problem wrt your modules. Here's what I have written down:

const handleConnectWallet = useCallback(
({ onSuccess, onFailure }: HandleConnectWalletArguments) => {
(async () => {
try {
const clientId = Constants.expoConfig?.extra?.web3auth.clientId;
const web3auth = new Web3Auth(WebBrowser, {
clientId,
network: OPENLOGIN_NETWORK.TESTNET, // MAINNET, AQUA, CELESTE, CYAN or TESTNET
loginConfig: {
// Add login configs corresponding to the provider
// Auth0 login works with jwt login config
jwt: {
verifier: Constants.expoConfig?.extra?.web3auth.auth0Verifier, // Please create a verifier on the developer dashboard and pass the name here
typeOfLogin: “jwt”,
clientId: Constants.expoConfig?.extra?.auth0.clientId, // use your app client id you got from auth0
},
// Add other login providers here
},
});

      const info = await web3auth.login({
        redirectUrl: resolvedRedirectUrl,
        mfaLevel: "none", // Pass on the mfa level of your choice: default, optional, mandatory, none
        // HIGHLIGHTSTART-customAuthStep
        // Auth0 login works with JWT loginProvider
        loginProvider: "jwt",
        extraLoginOptions: {
          domain: Constants.expoConfig?.extra?.auth0.domain, // Please append "https://" before your domain
          verifierIdField: "sub", // For SMS & Email Passwordless, use "name" as verifierIdField
        },
      });

      alert("Logged In with: " + info.privKey);
      // will rework the below later
      if (!w3m) {
        alert('Undefined wallet modal provider.');
        logger.warn('w3m not yet defined');
        return;
      }

      const web3Provider = await getProvider();

      if (!web3Provider) {
        logger.warn('web3Provider not yet defined');
        return;
      }

      setIsConnecting(true);

      const signer = web3Provider.getSigner();
      const signerAddress = await signer.getAddress();
      const chain = ChainNames.Ethereum;
      const subChain = SubChainIds.EthereumMainnet;
      setConnectedAddress(signerAddress);

      if (onSuccess) onSuccess(signerAddress, chain, subChain);
    } catch (e) {
      logger.error('Failed to connect wallet', e as Error);
      setError(String(e)); // :shrug:

      if (onFailure) onFailure(e as Error);
    } finally {
      setIsConnecting(false);
    }
  })();
},
[w3m, getProvider],

);

whenever I try to run it I'm getting:

@web3auth/react-native-sdk/dist/reactNativeSdk.cjs.js:36:60)">
node_modules/react-native-url-polyfill/index.js:1
import ‘./js/ios10Fix’;
^^^^^^

SyntaxError: Cannot use import statement outside a module
at compileFunction (<anonymous>)
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions…js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.919 (/Users/vor0220/kod/kod-ecosystem/node_modules/@web3auth/react-native-sdk/dist/reactNativeSdk.cjs.js:36:60)

Any suggestions or views into this would be appreciated as it appears to be stemming from this particular reactNativeSdk.



Originally posted by: VoR0220

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/1223