connectInstance.create is not a function

I'm using the expo framework with react-native

Version: @stripe/react-connect-js ^3.3.13

const StripeOnboarding = () => {
  const [clientSecret, setClientSecret] = useState<string | null>(null);
  const [stripeConnectInstance, setStripeConnectInstance] = useState<any>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const initializeStripeConnect = async () => {
      try {
        const secret = await fetchClientSecret("acct_1Pu5EnRHdCpv30v5");
        if (secret) {
          const stripeInstance = await loadStripe(STRIPE_PUBLIC_KEY);
          console.log("Stripe instance:", stripeInstance); // Debug line
          setStripeConnectInstance(stripeInstance);
          setClientSecret(secret);
        }
      } catch (error) {
        console.error("Error initializing Stripe:", error); // Catch and log errors
      } finally {
        setLoading(false);
      }
    };

    initializeStripeConnect();
  }, []);

  if (loading) {
    return (
      <View style={styles.loadingContainer}>
        <ActivityIndicator size="large" color="#0000ff" />
      </View>
    );
  }

  return (
    <View style={styles.container}>
      {stripeConnectInstance && clientSecret ? (
        <ConnectComponentsProvider connectInstance={stripeConnectInstance}>
          <ConnectAccountOnboarding onExit={() => { }} />
        </ConnectComponentsProvider>
      ) : (
        <View>
          <Text>Failed to initialize Stripe.</Text>
        </View>
      )}
    </View>
  );
};

you can replace with any embeded component with the same error.

Error: connectInstance.create is not a function

CallStack

React.useLayoutEffect$argument_0
node_modules/@stripe/react-connect-js/dist/react-connect.esm.js:92:42
commitHookEffectListMount
node_modules/react-dom/cjs/react-dom.development.js:23150:26
commitLayoutEffectOnFiber
node_modules/react-dom/cjs/react-dom.development.js:23268:17
commitLayoutMountEffects_complete
node_modules/react-dom/cjs/react-dom.development.js:24688:9
commitLayoutEffects_begin
node_modules/react-dom/cjs/react-dom.development.js:24674:7
commitLayoutEffects_begin
node_modules/react-dom/cjs/react-dom.development.js:24656:11
commitLayoutEffects_begin
node_modules/react-dom/cjs/react-dom.development.js:24656:11
commitLayoutEffects
node_modules/react-dom/cjs/react-dom.development.js:24612:3
commitRootImpl
node_modules/react-dom/cjs/react-dom.development.js:26823:5
commitRoot
node_modules/react-dom/cjs/react-dom.development.js:26682:5
finishConcurrentRender
node_modules/react-dom/cjs/react-dom.development.js:25981:9
performConcurrentWorkOnRoot
node_modules/react-dom/cjs/react-dom.development.js:25809:7
workLoop
node_modules/scheduler/cjs/scheduler.development.js:266:34
flushWork
node_modules/scheduler/cjs/scheduler.development.js:239:14
performWorkUntilDeadline
node_modules/scheduler/cjs/scheduler.development.js:533:21

removing the embeded component the error goes away, the connectInstance is properly initializing.

react-connect.esm.js line 92

var useCreateComponent = function useCreateComponent(tagName) {
  var _React$useState = React.useState(null),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    component = _React$useState2[0],
    setComponent = _React$useState2[1];
  var _useConnectComponents = useConnectComponents(),
    connectInstance = _useConnectComponents.connectInstance;
  var wrapperDivRef = React.useRef(null);
  // We set width to 100% to preserve this functionality aspect of embedded components even though
  // we are introducing a wrapper div for this element
  // https://docs.corp.stripe.com/connect/get-started-connect-embedded-components#width-and-height
  var wrapper = /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%'
    },
    ref: wrapperDivRef
  });
  React.useLayoutEffect(function () {
    if (wrapperDivRef.current !== null && component === null) {
      var newComponent = connectInstance.create(tagName);
      setComponent(newComponent);
      if (newComponent !== null) {
        try {
          newComponent.setAttribute('reactSdkAnalytics', '3.3.13');
        } catch (e) {
          console.log('Error setting React Sdk version with error message: ', e);
        }
        while (wrapperDivRef.current.firstChild) {
          wrapperDivRef.current.removeChild(wrapperDivRef.current.firstChild);
        }
        wrapperDivRef.current.appendChild(newComponent);
      }
    }
  }, [connectInstance, tagName]);
  return {
    wrapper: wrapper,
    component: component
  };
};

above is the function that is giving the error, the connectInstance object does not have a function create.

stripe / react-connect-js

connectInstance.create is not a function #111