Expo Web Server Error None of these files exist: node_modules/react-native/Libraries/Utilities/Platform(...)

[OmerKayaa]

Describe the bug
When adding the following line to my code:

const { confirmPayment } = useConfirmPayment();

or

initStripe({publishableKey:"..."})

the web server (and only the web server) throws the following error:

Syntax Error  
None of these files exist:  
  * node_modules/react-native/Libraries/Utilities/Platform(.web.ts|.ts|.web.tsx|.tsx|.web.mjs|.mjs|.web.js|.js|.web.jsx|.jsx|.web.json|.json|.web.cjs|.cjs|.web.scss|.scss|.web.sass|.sass|.web.css|.css)  
  * node_modules/react-native/Libraries/Utilities/Platform  
Source  

26 | const Platform = require('../../Utilities/Platform');     
   |                           ^  

This issue occurs only in the web environment (Expo web). Mobile builds work as expected.

To Reproduce
Steps to reproduce the behavior:

1. Add the following line to a page:

   const { confirmPayment } = useConfirmPayment();

2. Run the command: npx expo start.
3. Open the app in the web browser (http://localhost:8081).
4. Observe the error.

Expected Behavior
The web server should serve the website without throwing an error.

Screenshots

Environment

• npm: 9.6.7
• tsc: 5.5.4
• expo-cli: 6.3.10
• Node.js: 21.7.3

Other Dependencies
Key dependencies:

{
  "@stripe/stripe-react-native": "^0.41.0",
  "expo": "~52.0.18",
  "expo-router": "~4.0.11",
  "react": "^18.3.1",
  "react-native": "^0.76.5",
  "react-native-web": "~0.19.10"
}

The full package.json

Additional Context
My project uses Expo Router, and the entry point is as follows:

<View style={styles.container}>
	{/* Logo */}
	<Animated.View style={[styles.logoContainer, { opacity: fadeAnim }]}>
		<Image source={require('...')} style={styles.logo} resizeMode='contain' />
	</Animated.View>
	{/* Onboarding Screens */}
	{isFirstLaunch && <OnboardingComponent fadeValue={onboardingFade} />}
</View>

The app is not wrapped with <StripeProvider> at the root due to Expo Router's limitations. Instead, specific pages are wrapped where needed, which works for mobile builds.

Question
Is this a bug in @stripe/stripe-react-native, or am I missing a configuration for Expo Web?

[zarkadoulasa]

I am having the same issue but when trying to create a web build with npx expo export -p web

[OmerKayaa]

npx expo export -p web

didn't work

[zarkadoulasa]

@OmerKayaa I actually solved this. The issue stems from @stripe/stripe-react-native as it is not compatible with web. I ended up creating separate components for native and web e.g TipCheckout.native.tsx and TipCheckout.web.tsx.

One using @stripe/stripe-react-native (.native.tsx) and one using embedded stripe checkout (.web.tsx)

Then I modified my metro.config.js to ignore .native files when building for web:

const { getDefaultConfig } = require('expo/metro-config');
const { withNativeWind } = require('nativewind/metro');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

const platformSpecific = process.env.PLATFORM === 'web' ? {
  resolver: {
    ...config.resolver,
    blacklistRE: /\.native\.[jt]sx?$/
  }
} : {};

const updatedConfig = {
  ...config,
  ...platformSpecific
};

module.exports = withNativeWind(updatedConfig, { input: './global.css' });

Then I specify the platform, when building, using:
PLATFORM=web npx expo export -p web

Personally I had no issue before doing this when running npm start for local development. I only had the issue when bundling for web, specifically when deploying with Vercel.

The key takeaway here is @stripe/stripe-react-native cannot be present in web builds.

Hope this helps!!

[smcervera]

I had the same issue but I resolved it checking the component import. In my case I was importing
import CheckoutForm from "~/src/components/CheckoutForm.native";

instead of

import CheckoutForm from "~/src/components/CheckoutForm";