Unable to render StripePaymentInput/StripeForm components

[joshreeves]

Type: breaking

Describe the bug
Error related to StripeForm when using StripePaymentInput component in CheckoutActions.

To Reproduce

• npx create-react-app my-app
• cd my-app
• yarn add [email protected] [email protected] [email protected] [email protected] @reactioncommerce/[email protected] @reactioncommerce/components
• yarn add react-stripe-elements
• yarn add --dev react-app-rewired

Then, in package.json, update the start, build, and test scripts to replace react-scripts with react-app-rewired:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

Finally, paste this into a file in the project root directory named config-overrides.js:

module.exports = function override(webpackConfig) {
  webpackConfig.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  });

  return webpackConfig;
}

App.js:

import React from 'react';
import { ComponentsProvider } from "@reactioncommerce/components-context";
import {StripeProvider} from 'react-stripe-elements';
import appComponents from "./components/appComponents";
import CheckoutExample from './components/CheckoutExample'
import './App.css';

function App() {
  return (
    <StripeProvider stripe={null}>
      <ComponentsProvider value={appComponents}>
        <CheckoutExample />
      </ComponentsProvider>
    </StripeProvider>
  );
}

export default App;

src/components/CheckoutExample.js

import React from "react";
import { withComponents } from "@reactioncommerce/components-context";

class CheckoutExample extends React.Component {
  render() {
    const { CheckoutActions, PaymentsCheckoutAction, StripePaymentInput, ExampleIOUPaymentForm } = this.props.components;

    const actions = [
      {
        id: "1",
        activeLabel: "Enter payment information",
        completeLabel: "Payment information",
        incompleteLabel: "Payment information",
        status: "incomplete",
        component: PaymentsCheckoutAction,
        onSubmit: () => {},
        props: {
          addresses: [],
          alert: null,
          onReset: () => {},
          payments: [],
          paymentMethods: [
            {
              displayName: "Credit Card",
              InputComponent: StripePaymentInput,
              name: "stripe_card",
              shouldCollectBillingAddress: true
            }
          ],
          remainingAmountDue: 105.75
        }
      }
    ];

    return (
      <CheckoutActions actions={actions} />
    )
  }
}

export default withComponents(CheckoutExample);

src/components/appComponents.js

import iconClear from "@reactioncommerce/components/svg/iconClear";
import iconDismiss from "@reactioncommerce/components/svg/iconDismiss";
import iconError from "@reactioncommerce/components/svg/iconError";
import iconValid from "@reactioncommerce/components/svg/iconValid";
import iconExpand from "@reactioncommerce/components/svg/iconExpand";
import iconPlus from "@reactioncommerce/components/svg/iconPlus";
import iconAmericanExpress from "@reactioncommerce/components/svg/iconAmericanExpress";
import iconDiscover from "@reactioncommerce/components/svg/iconDiscover";
import iconLock from "@reactioncommerce/components/svg/iconLock";
import iconMastercard from "@reactioncommerce/components/svg/iconMastercard";
import iconVisa from "@reactioncommerce/components/svg/iconVisa";
import Button from "@reactioncommerce/components/Button/v1";
import CartItem from "@reactioncommerce/components/CartItem/v1";
import CartItemDetail from "@reactioncommerce/components/CartItemDetail/v1";
import Price from "@reactioncommerce/components/Price/v1";
import QuantityInput from "@reactioncommerce/components/QuantityInput/v1";
import StockWarning from "@reactioncommerce/components/StockWarning/v1";
import CartItems from "@reactioncommerce/components/CartItems/v1";
import CartEmptyMessage from "@reactioncommerce/components/CartEmptyMessage/v1";
import CheckoutAction from "@reactioncommerce/components/CheckoutAction/v1";
import CheckoutActionComplete from "@reactioncommerce/components/CheckoutActionComplete/v1";
import CheckoutActionIncomplete from "@reactioncommerce/components/CheckoutActionIncomplete/v1";
import CheckoutActions from "@reactioncommerce/components/CheckoutActions/v1";
import ShippingAddressCheckoutAction from "@reactioncommerce/components/ShippingAddressCheckoutAction/v1";
import FulfillmentOptionsCheckoutAction from "@reactioncommerce/components/FulfillmentOptionsCheckoutAction/v1";
import PaymentsCheckoutAction from "@reactioncommerce/components/PaymentsCheckoutAction/v1";
import ExampleIOUPaymentForm from "@reactioncommerce/components/ExampleIOUPaymentForm/v1";
import StripePaymentInput from "@reactioncommerce/components/StripePaymentInput/v1";
import StripeForm from "@reactioncommerce/components/StripeForm/v1";
import AddressChoice from "@reactioncommerce/components/AddressChoice/v1";
import AddressCapture from "@reactioncommerce/components/AddressCapture/v1";
import InlineAlert from "@reactioncommerce/components/InlineAlert/v1";
import AddressForm from "@reactioncommerce/components/AddressForm/v1";
import Checkbox from "@reactioncommerce/components/Checkbox/v1";
import ErrorsBlock from "@reactioncommerce/components/ErrorsBlock/v1";
import Field from "@reactioncommerce/components/Field/v1";
import TextInput from "@reactioncommerce/components/TextInput/v1";
import Select from "@reactioncommerce/components/Select/v1";
import PhoneNumberInput from "@reactioncommerce/components/PhoneNumberInput/v1";
import RegionInput from "@reactioncommerce/components/RegionInput/v1";
import AddressReview from "@reactioncommerce/components/AddressReview/v1";
import Address from "@reactioncommerce/components/Address/v1";
import SelectableList from "@reactioncommerce/components/SelectableList/v1";
import SelectableItem from "@reactioncommerce/components/SelectableItem/v1";
import FinalReviewCheckoutAction from "@reactioncommerce/components/FinalReviewCheckoutAction/v1";

export default {
  iconClear,
  iconDismiss,
  iconError,
  iconExpand,
  iconPlus,
  iconValid,
  iconAmericanExpress,
  iconDiscover,
  iconLock,
  iconMastercard,
  iconVisa,
  Button,
  CartEmptyMessage,
  CartItem,
  CartItemDetail,
  Price,
  QuantityInput,
  StockWarning,
  CartItems,
  CheckoutAction,
  CheckoutActionComplete,
  CheckoutActionIncomplete,
  CheckoutActions,
  ShippingAddressCheckoutAction,
  FulfillmentOptionsCheckoutAction,
  PaymentsCheckoutAction,
  StripePaymentInput,
  StripeForm,
  AddressChoice,
  AddressCapture,
  InlineAlert,
  AddressForm,
  Checkbox,
  ErrorsBlock,
  Field,
  TextInput,
  Select,
  PhoneNumberInput,
  RegionInput,
  AddressReview,
  Address,
  SelectableList,
  SelectableItem,
  ExampleIOUPaymentForm,
  FinalReviewCheckoutAction
};

Run yarn start and observe the error Element type is invalid and a recommendation to "Check the render method of StripeForm", with no additional helpful information.

Expected behavior
A Stripe payment form successfully rendering.

Screenshots

Desktop (please complete the following information):

• OS: macOS 10.15.2
• Browser: Chrome
• Version: 79

Additional context
I assume I'm missing something obvious, but have spent hours trying to get this to work (trying every example from the documentation that I could find) with zero success.