stripe-react-native: error: Error: Unable to resolve module ../../package.json

Describe the bug Getting this error after installing the module. Already tried everything from #770 but no success.

error: Error: Unable to resolve module ../../package.json from /Users/user/Turix/turix-rn-mobile/node_modules/@stripe/stripe-react-native/lib/commonjs/components/StripeProvider.js: 

None of these files exist:
  * node_modules/@stripe/stripe-react-native/lib/package.json(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.cjs|.native.cjs|.cjs)
  * node_modules/@stripe/stripe-react-native/lib/package.json/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.cjs|.native.cjs|.cjs)

To Reproduce 1 - create a new typescript react native project. 2 - install stripe module for react native

Expected behavior Normally running

Dependencies:

"dependencies": {
   "@apollo/client": "^3.5.5",
   "@react-native-async-storage/async-storage": "^1.13.4",
   "@react-native-community/masked-view": "^0.1.10",
   "@react-native-picker/picker": "^2.3.1",
   "@react-navigation/bottom-tabs": "^5.11.7",
   "@react-navigation/native": "^5.9.2",
   "@react-navigation/stack": "^5.14.2",
   "@reduxjs/toolkit": "^1.5.0",
   "@stripe/stripe-react-native": "^0.4.0",
   "@titelmedia/react-apollo-multiple-clients": "^4.0.5",
   "graphql": "^16.0.1",
   "i18n-js": "^3.8.0",
   "intl": "^1.2.5",
   "lodash.memoize": "^4.1.2",
   "moment": "^2.29.1",
   "react": "17.0.2",
   "react-apollo": "^3.1.5",
   "react-native": "0.67.3",
   "react-native-animatable": "^1.3.3",
   "react-native-appearance": "^0.3.4",
   "react-native-calendar-picker": "^7.1.2",
   "react-native-device-info": "^8.0.1",
   "react-native-dotenv": "^3.3.0",
   "react-native-elements": "^3.2.0",
   "react-native-fbsdk": "^3.0.0",
   "react-native-geolocation-service": "^5.3.0-beta.3",
   "react-native-gesture-handler": "^1.10.1",
   "react-native-google-signin": "^2.1.1",
   "react-native-image-picker": "^4.7.0",
   "react-native-linear-gradient": "^2.5.6",
   "react-native-localize": "^2.1.1",
   "react-native-maps": "^0.29.3",
   "react-native-permissions": "^3.1.0",
   "react-native-responsive-screen": "^1.4.2",
   "react-native-safe-area-context": "^3.3.2",
   "react-native-screens": "^2.17.1",
   "react-native-simple-events": "^1.0.1",
   "react-native-snap-carousel": "^3.9.1",
   "react-native-splash-screen": "^3.2.0",
   "react-native-vector-icons": "^8.0.0",
   "react-redux": "^7.2.2",
   "redux": "^4.0.5",
   "rn-range-slider": "^2.1.1"
 },
 "devDependencies": {
   "@babel/core": "^7.17.5",
   "@babel/plugin-transform-typescript": "^7.16.8",
   "@babel/runtime": "^7.17.2",
   "@react-native-community/eslint-config": "^1.1.0",
   "@types/jest": "^25.2.3",
   "@types/react-native": "^0.67.2",
   "@types/react-native-dotenv": "^0.2.0",
   "@types/react-native-fbsdk": "^3.0.2",
   "@types/react-native-snap-carousel": "^3.8.2",
   "@types/react-redux": "^7.1.23",
   "@types/react-test-renderer": "^16.9.2",
   "@types/redux": "^3.6.0",
   "babel-core": "^7.0.0-bridge.0",
   "babel-jest": "^23.4.2",
   "eslint": "^8.10.0",
   "jest": "^27.5.1",
   "metro-react-native-babel-preset": "^0.69.0",
   "react-test-renderer": "16.13.1",
   "typescript": "^4.6.2"
 },

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 2
Comments: 17

Most upvoted comments

Hi @charliecruzan-stripe 😄 I think this is an unfortunate path issue caused when transpiling this library. In Snack (specifically Snackager) we also have issues bundling this library to a single JS file.

In ./src/components/StripeProvider.tsx → The package json is imported using the …/…/package.json path. → This looks good because it resolves to the path ./package.json.
In ./lib/module/components/StripeProvider.js → the package json is still imported using the …/…/package.json path → This is not correct because it resolves to the path ./lib/package.json, and that does not exist → It’s caused because the transpiled files have a deeper folder structure as opposed to the normal source files.

So technically speaking, the transpiled versions of StripeProvider.tsx are importing a non-existing file. Either copying the package.json to ./lib/package.json, or updating this path to …/…/…/package.json when transpiling should fix this.

Hope this helps ❤️😁

byCedric on Apr 21, 2022

I’m using Apollo Client for GraphQL

https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19

marlon07021 on Mar 14, 2022