CODEWITHSUNDEEP
javascriptnode.jsmeteorstripe-payments
RomanOks
RomanOks

Reputation: 722

Stripe. TypeError: document.querySelectorAll is not a function

I'm using Meteor framework and React.

Added @stripe package. Payment form works, but it constantly displays following in the logs:

UnhandledPromiseRejectionWarning: TypeError: document.querySelectorAll is not a function
at findScript (/project/node_modules/@stripe/stripe-js/dist/stripe.js:9:26)
at /project/node_modules/@stripe/stripe-js/dist/stripe.js:75:20
at new Promise (<anonymous>)
at loadScript (/project/node_modules/@stripe/stripe-js/dist/stripe.js:57:19)
at /project/node_modules/@stripe/stripe-js/dist/stripe.js:113:10
at /.meteor/packages/promise/.0.11.2.1e1wn8z.joczg++os+web.browser+web.browser.legacy+web.cordova/npm/node_modules/meteor-promise/fiber_pool.js:43:40

How can I solve this problem?

Upvotes: 1

Views: 487

Answers (1)

Christian Fritz
Christian Fritz

Reputation: 21374

This appears to be an error you are seeing on the server (otherwise the node_modules paths would not be shown). So it appears that you are trying to server-side render the stripe form. This won't work because, yes, that function doesn't exist on the server. I think your best option is to add a guard to the react component where this stripe form is used. Something like this:

const MyPaymentForm = (props) => {

  if (Meteor.isServer) {
    return <div>Stripe form will load dynamically on client</div>;
  }

  render <div suppressHydrationWarning={true}>
    <StripeProviver>...</StripeProvider>
  </div>;
};

The suppressHydrationWarning parameter on the client version is to avoid the (common) React error about hydrating HTML that has a different shape on the client than what came back from the server on.

Upvotes: 3

Related Questions