import error with stripe-react-native

[ammarm08]

Hey there @nandorojo thanks for all your work with solito + its supporting monorepos.

The following error comes from a fresh install of the tailwind starter template. I've tried this with both Node versions 16.16 and with 18.0 (via nvm)

I installed @stripe/stripe-react-native in apps/expo. When I mount the StripeProvider at packages/app/provider and then run yarn web, I get the following error:

error - ../../node_modules/react-native/Libraries/Components/TextInput/TextInputState.js
Error: 
  x Expected ',', got '{'
    ,-[/Users/ammarmian/Code/my-solito-app/node_modules/react-native/Libraries/Components/TextInput/TextInputState.js:12:1]
 12 | // TextInputs. All calls relating to the keyboard should be funneled
 13 | // through here.
 14 | 
 15 | import type {
    :             ^
 16 |   HostComponent,
 17 |   MeasureInWindowOnSuccessCallback,
 18 |   MeasureLayoutOnSuccessCallback,
    `----

Caused by:
    Syntax Error

Import trace for requested module:
../../node_modules/react-native/Libraries/Components/TextInput/TextInputState.js
../../node_modules/@stripe/stripe-react-native/lib/module/helpers.js
../../node_modules/@stripe/stripe-react-native/lib/module/functions.js
../../node_modules/@stripe/stripe-react-native/lib/module/index.js
../../packages/app/provider/index.tsx

Here's the supporting code:

// provider/index.tsx

import { StripeProvider } from '@stripe/stripe-react-native';

//  ... other imports

export function Provider({ children }: { children: React.ReactNode }) {
  return (
    <SafeArea>
        <StripeProvider
          publishableKey="stripe-key"
        >
          <NavigationProvider>{children}</NavigationProvider>
        </StripeProvider>
    </SafeArea>
  )
}

// next.config.js

const { withExpo } = require('@expo/next-adapter')

/** @type {import('next').NextConfig} */
const nextConfig = {
  // reanimated (and thus, Moti) doesn't work with strict mode currently...
  // https://github.com/nandorojo/moti/issues/224
  // https://github.com/necolas/react-native-web/pull/2330
  // https://github.com/nandorojo/moti/issues/224
  // once that gets fixed, set this back to true
  reactStrictMode: false,
  transpilePackages: [
    'react-native',
    'react-native-web',
    'solito',
    'moti',
    'app',
    'react-native-reanimated',
    'nativewind',
    'react-native-gesture-handler',
    '@stripe/stripe-react-native',
  ],
}

module.exports = withExpo(nextConfig)

// expo package.json
{
  "dependencies": {
    "@stripe/stripe-react-native": "^0.29.0",
    "app": "*",
    "expo": "^48.0.0",
    "expo-linking": "~4.0.1",
    "expo-splash-screen": "~0.18.1",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.71.8",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-reanimated": "3.0.2",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-web": "~0.18.11"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.27",
    "@types/react-native": "~0.69.1",
    "tailwindcss": "^3.0.24",
    "typescript": "^4.9.4"
  },
  "scripts": {
    "start": "expo start --dev-client",
    "android": "expo run:android",
    "ios": "expo run:ios",
    "web": "expo start --web"
  },
  "main": "index.js",
  "version": "1.0.0",
  "private": true,
  "name": "expo-app"
}

I'm hoping this is a transpilation issue that has a straightforward solution. Alas, no luck so far.

[nandorojo]

you’ll have to use stripe js on web. see the solito docs for tree shaking / platform-specific code. it doesn’t look like stripe react native has web support, so that would be an issue to open with them.

[ammarm08]

you’ll have to use stripe js on web. see the solito docs for tree shaking / platform-specific code. it doesn’t look like stripe react native has web support, so that would be an issue to open with them.

thanks for the quick response! will try that out