React集成Stripe时报TypeError: Object(...) is not a function如何解决

报错原因 #

你出现这个错误的核心问题是**loadStripe的导入来源错误**：
loadStripe方法属于@stripe/stripe-js基础包，不是从@stripe/react-stripe-js中导出的，你目前的导入语句写错了。

修复步骤 #

1. 先安装缺失的依赖包，在项目根目录执行命令：

npm install @stripe/stripe-js
# 用yarn的话执行 yarn add @stripe/stripe-js

2. 修改导入语句，把原来的：

import { loadStripe } from "@stripe/react-stripe-js";

替换为：

import { loadStripe } from "@stripe/stripe-js";

3. 如果修改后还有报错，检查两个Stripe相关包的版本是否匹配，建议卸载后重新安装最新版本：

npm uninstall @stripe/react-stripe-js @stripe/stripe-js
npm install @stripe/react-stripe-js @stripe/stripe-js

额外提醒 #

你现在直接用了生产环境的公钥，开发阶段建议优先使用Stripe提供的测试公钥，避免后续测试支付时产生真实交易。

内容的提问来源于stack exchange，提问作者heretolearn