在Next.js中集成Rewardful时出现window.rewardful不是函数的问题

错误原因 #

你遇到的window.rewardful is not a function或rewardful is not defined错误，核心是Rewardful的异步脚本还未加载完成，就触发了convert调用。带async属性的Script组件会延迟加载rw.js，导致支付成功回调触发时，rewardful对象还未挂载到window上。

可行解决方案 #

方案1：监听脚本加载状态，确保可用后再调用 #

修改Head中的Script组件，添加onLoad回调标记脚本加载完成：

<Head>
  <link rel="preconnect" href="https://fonts.googleapis.com"></link>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin></link>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap" rel="stylesheet"></link>
  <Script 
    async 
    src='https://r.wdfl.co/rw.js' 
    data-rewardful='APIKEY'
    onLoad={() => {
      window.rewardfulReady = true;
    }}
  />
</Head>

在支付成功的回调中，轮询等待rewardful可用后再执行调用：

function handlePaymentSuccess(email) {
  const checkInterval = setInterval(() => {
    if (window.rewardful) {
      clearInterval(checkInterval);
      window.rewardful('convert', { email });
    }
  }, 100);

  // 设置5秒超时兜底，避免无限轮询
  setTimeout(() => clearInterval(checkInterval), 5000);
}

方案2：预初始化队列函数，兼容脚本未加载的情况 #

移除_document.js中的那段useEffect代码，在_app.js中添加预初始化逻辑：

useEffect(() => {
  if (!window.rewardful) {
    window._rwq = 'rewardful';
    window.rewardful = window.rewardful || function() {
      (window.rewardful.q = window.rewardful.q || []).push(arguments);
    };
  }
}, []);

这样即使脚本还没加载，调用window.rewardful('convert', { email })时，参数会被存入队列，等rw.js加载完成后自动执行，不会报错。

方案3：同步加载脚本（不推荐，仅作测试用） #

移除Script组件的async属性，让脚本同步加载（会影响页面加载性能）：

<Script 
  src='https://r.wdfl.co/rw.js' 
  data-rewardful='APIKEY'
/>

之后直接在支付成功回调中调用window.rewardful('convert', { email })即可。

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