Metro Bundler Fails to Resolve ./AppleButton in @invertase/react-native-apple-authentication

[guerreroz01]

When building an Expo project (iOS) with @invertase/react-native-apple-authentication, Metro fails to resolve the AppleButton component, even though it’s a core part of the package. The error occurs during bundling, specifically when trying to export the app (expo export:embed).

Unable to resolve module ./AppleButton from /Users/expo/workingdir/build/node_modules/@invertase/react-native-apple-authentication/lib/index.js:
None of these files exist:

• node_modules/@invertase/react-native-apple-authentication/lib/AppleButton(.js|.ts|.jsx|.tsx|.json)
• node_modules/@invertase/react-native-apple-authentication/lib/AppleButton

Complete log from expo:
Starting Metro Bundler
iOS node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓░░░░░░░ 59.7% (605/783)
iOS node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░ 82.7% (1487/1635)
iOS Bundled 7286ms node_modules/expo-router/entry.js (1836 modules)
Exporting server
λ node_modules/expo-router/build/static/getServerManifest.js ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░ 82.3% (1312/1446)
λ Bundling failed 4022ms node_modules/expo-router/build/static/getServerManifest.js (1603 modules)
Unable to resolve module ./AppleButton from /Users/expo/workingdir/build/node_modules/@invertase/react-native-apple-authentication/lib/index.js:
None of these files exist:

• node_modules/@invertase/react-native-apple-authentication/lib/AppleButton(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css|.web.cjs|.cjs|.web.mjs|.mjs)
• node_modules/@invertase/react-native-apple-authentication/lib/AppleButton
  22 |
  23 |

24 | export { default as AppleButton } from './AppleButton';
| ^
25 |
26 | /**
27 | * iOS
Error: Unable to resolve module ./AppleButton from /Users/expo/workingdir/build/node_modules/@invertase/react-native-apple-authentication/lib/index.js:
None of these files exist:

• node_modules/@invertase/react-native-apple-authentication/lib/AppleButton(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css|.web.cjs|.cjs|.web.mjs|.mjs)
• node_modules/@invertase/react-native-apple-authentication/lib/AppleButton
  22 |
  23 |

24 | export { default as AppleButton } from './AppleButton';
| ^
25 |
26 | /**
27 | * iOS
Error: Unable to resolve module ./AppleButton from /Users/expo/workingdir/build/node_modules/@invertase/react-native-apple-authentication/lib/index.js:
None of these files exist:

• node_modules/@invertase/react-native-apple-authentication/lib/AppleButton(.web.ts|.ts|.web.tsx|.tsx|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css|.web.cjs|.cjs|.web.mjs|.mjs)
• node_modules/@invertase/react-native-apple-authentication/lib/AppleButton
  22 |
  23 |

24 | export { default as AppleButton } from './AppleButton';
| ^
25 |
26 | /**
27 | * iOS
at ModuleResolver.resolveDependency (/Users/expo/workingdir/build/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:114:15)
at DependencyGraph.resolveDependency (/Users/expo/workingdir/build/node_modules/metro/src/node-haste/DependencyGraph.js:239:43)
at /Users/expo/workingdir/build/node_modules/metro/src/lib/transformHelpers.js:165:21
at resolveDependencies (/Users/expo/workingdir/build/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
at visit (/Users/expo/workingdir/build/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
at processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Promise.all (index 5)
at visit (/Users/expo/workingdir/build/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
at async Promise.all (index 13)
at visit (/Users/expo/workingdir/build/node_modules/metro/src/DeltaBundler/buildSubgraph.js:92:5)
npx expo export:embed --eager --platform ios --dev false exited with non-zero code: 1

[ignatzami]

Seeing this issue as well.

"@invertase/react-native-apple-authentication": "^2.4.1",
"expo": "~52.0.46",
"react-native": "0.76.9",

[hqwlkj]

Same problem

[rcypankaj]

is there any update for this issue?

[harleygarrett]

I'm also experiencing this issue

[imchristianlowe]

I'm using expo as well and am experiencing the same issue but it seems to only happen when I try to run the web version of the app. The iOS version of the app works well.

[imchristianlowe]

I'm using expo as well and am experiencing the same issue but it seems to only happen when I try to run the web version of the app. The iOS version of the app works well.

This is quite hacky and by no means should be used in production, but if you are using this in an Expo app and Firebase and want this to work, I created a fork that just adds an AppleButton.web.tsx dummy file so loading works and then I used the regular Firebase JS sdk for the apple auth on the web version which looks something like this

import { ThemedSafeAreaView } from "@/components/ThemedSafeAreaView";
import { ThemedText } from "@/components/ThemedText";
import { Link, Tabs } from "expo-router";
import { useEffect, useState } from "react";
import { Platform, ScrollView } from "react-native";
import { getAuth, onAuthStateChanged } from "firebase/auth";
import AppleAuthButton from "@/components/AppleAuthButton.web";
import { initializeApp } from "firebase/app";

// Initialize Firebase
const firebaseConfig = {...};

const app = initializeApp(firebaseConfig);

export default function App() {
  // Set an initializing state whilst Firebase connects
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState<any>();

  // Handle user state changes
  function handleAuthStateChanged(user: any) {
    setUser(user);
    if (initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = onAuthStateChanged(getAuth(), handleAuthStateChanged);
    return subscriber; // unsubscribe on unmount
  }, []);

  const handleAppleAuthSuccess = (user: any) => {
    console.log("Apple sign-in complete!", user);
  };

  const handleAppleAuthError = (error: any) => {
    console.error("Apple sign-in error:", error);
  };

  const isWeb = Platform.OS === "web";

  return (
    <ThemedSafeAreaView style={{ flex: 1 }}>
      <ScrollView>
        <ThemedText>Web</ThemedText>
        <Link href="/privacy-policy">
          <ThemedText type="link">Privacy Policy</ThemedText>
        </Link>
        <Link href="/terms-of-service">
          <ThemedText type="link">Terms of Service</ThemedText>
        </Link>
        {user && <ThemedText>Signed in as: {user.email}</ThemedText>}
        <AppleAuthButton
          onSuccess={handleAppleAuthSuccess}
          onError={handleAppleAuthError}
        />
      </ScrollView>
    </ThemedSafeAreaView>
  );
}

AppleAuthButton.web.tsx

import React from "react";
import { Button } from "react-native";
import { getAuth, OAuthProvider, signInWithPopup } from "firebase/auth";

interface AppleAuthButtonProps {
  onSuccess?: (user: any) => void;
  onError?: (error: any) => void;
}

export default function AppleAuthButton({
  onSuccess,
  onError,
}: AppleAuthButtonProps) {
  const handleWebAppleAuth = async () => {
    try {
      const provider = new OAuthProvider("apple.com");
      const auth = getAuth();

      const result = await signInWithPopup(auth, provider);
      const user = result.user;

      if (onSuccess) {
        onSuccess(user);
      }
    } catch (error) {
      console.error("Web Apple auth error:", error);
      if (onError) {
        onError(error);
      }
    }
  };

  return <Button title="Sign in with Apple" onPress={handleWebAppleAuth} />;
}

I would love to see an apple button for the web get baked into this package and I might work on that in my fork and submit a PR if that's something people would find useful.