Stripe. TypeError: document.querySelectorAll is not a function

Question

我正在使用 Meteor 框架和 React。

添加了@stripe 包。付款表格有效，但它不断在日志中显示以下内容：

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

我该如何解决这个问题？

Answer 1

这似乎是您在服务器上看到的一个错误（否则将不会显示 node_modules 路径）。因此，您似乎正在尝试在服务器端呈现条纹形式。这行不通，因为，是的，服务器上不存在该功能。我认为你最好的选择是在使用这种条纹形式的反应组件中添加一个守卫。像这样：

const MyPaymentForm = (props) => {

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

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

客户端版本的 suppressHydrationWarning 参数是为了避免关于水合 HTML 的（常见）React 错误，该错误在客户端上的形状与从服务器返回的形状不同。

Stripe. TypeError: document.querySelectorAll is not a function

Stripe. TypeError: document.querySelectorAll is not a function

javascript

node.js

meteor

stripe-payments