React Native x Stripe integration Error: Unable to resolve module ../../StripeProvider.js

Question

我正在尝试将 Stripe 集成到从 this ignite template. Everything has been great up to this point. I am following the stripe SDK docs 构建的 React Native 项目中。当我在 app.tsx 中导入并用 <StripeProvider /> 包装我的导航器时，会抛出一个错误：

error: Error: Unable to resolve module ../../package.json from /Users/matthew/Desktop/less/less-app/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)
> 1 | var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.StripeProvider=StripeProvider;exports.initStripe=void 0;var _regenerator=_interopRequireDefault(require("@babel/runtime/regenerator"));var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _NativeStripeSdk=_interopRequireDefault(require("../NativeStripeSdk"));var _helpers=require("../helpers");var _package=_interopRequireDefault(require("../../package.json"));function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var EXPO_PARTNER_ID='pp_partner_JBN7LkABco2yUu';var repository=_package.default.repository;var appInfo={name:(0,_helpers.shouldAttributeExpo)()?_package.default.name+"/expo":_package.default.name,url:repository.url||repository,version:_package.default.version,partnerId:(0,_helpers.shouldAttributeExpo)()?EXPO_PARTNER_ID:undefined};var initStripe=function _callee(params){var extendedParams;return _regenerator.default.async(function _callee$(_context){while(1){switch(_context.prev=_context.next){case 0:extendedParams=(0,_extends2.default)({},params,{appInfo:appInfo});_NativeStripeSdk.default.initialise(extendedParams);case 2:case"end":return _context.stop();}}},null,null,null,Promise);};exports.initStripe=initStripe;function StripeProvider(_ref){var children=_ref.children,publishableKey=_ref.publishableKey,merchantIdentifier=_ref.merchantIdentifier,threeDSecureParams=_ref.threeDSecureParams,stripeAccountId=_ref.stripeAccountId,urlScheme=_ref.urlScheme,setUrlSchemeOnAndroid=_ref.setUrlSchemeOnAndroid;(0,_react.useEffect)(function(){if(!publishableKey){return;}if(_helpers.isAndroid){_NativeStripeSdk.default.initialise({publishableKey:publishableKey,appInfo:appInfo,stripeAccountId:stripeAccountId,threeDSecureParams:threeDSecureParams,urlScheme:urlScheme,setUrlSchemeOnAndroid:setUrlSchemeOnAndroid});}else{_NativeStripeSdk.default.initialise({publishableKey:publishableKey,appInfo:appInfo,stripeAccountId:stripeAccountId,threeDSecureParams:threeDSecureParams,merchantIdentifier:merchantIdentifier,urlScheme:urlScheme});}},[publishableKey,merchantIdentifier,stripeAccountId,threeDSecureParams,urlScheme,setUrlSchemeOnAndroid]);return _react.default.createElement(_react.default.Fragment,null,children);}

我在 app.tsx

中的导入语句

import { initStripe, StripeProvider } from "@stripe/stripe-react-native"

    <ToggleStorybook>
      <ApolloProvider client={client}>
        <RootStoreProvider value={rootStore}>
          <SafeAreaProvider initialMetrics={initialWindowMetrics}>
            <ErrorBoundary catchErrors={"always"}>
              <StripeProvider publishableKey="pk_test_testID">
                <AppNavigator
                  initialState={initialNavigationState}
                  onStateChange={onNavigationStateChange}
                />
              </StripeProvider>
            </ErrorBoundary>
          </SafeAreaProvider>
        </RootStoreProvider>
      </ApolloProvider>
    </ToggleStorybook>

我找到了 this 线程，但建议的修复无效，当我尝试使用 yarn start --reset-cache 启动应用程序时，出现错误 error Cannot read property 'getDefaultValues' of undefined。我也尝试了 initStripe 方法来达到同样的目的。这是我的 metro.config.js 文件：

const { getDefaultConfig } = require("metro-config")

const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues()

exports.resolver = {
  ...defaultResolver,
  sourceExts: [...defaultResolver.sourceExts, "cjs"],
}

关于这个问题，我找不到更多信息。任何建议将不胜感激。

Answer 1

转到文件：

/node_modules/@stripe/stripe-react-native/lib/commonjs/components/StripeProvider.js 并将导入从 '../../package.json' 修改为 '../../../package.json'.

这不是解决方案，而是解决方法。提醒一下，每次你 re/install 你的 npms 错误都会回来。

React Native x Stripe integration Error: Unable to resolve module ../../StripeProvider.js

React Native x Stripe integration Error: Unable to resolve module ../../StripeProvider.js

bundler

stripe-payments

react-native