条带结帐会话与 Firebase 顶级等待错误的集成答案

【问题标题】：Stripe checkout session integration with firebase top-level-await error条带结帐会话与 Firebase 顶级等待错误的集成
【发布时间】：2022-01-02 16:54:11
【问题描述】：

您好，我一直在尝试使用 stripe firebase 扩展创建结帐会话，但遇到了这个错误：

./pages/viewer.js 模块解析失败：顶级等待实验未启用（设置experiments.topLevelAwait：true启用它）使用这些加载器处理了文件：

./node_modules/next/dist/build/babel/loader/index.js 您可能需要一个额外的加载器来处理这些加载器的结果。错误：顶级等待实验未启用（设置experiments.topLevelAwait: true 以启用它）

我不确定错误指的是什么。这对我来说是一个全新的概念。

我正在使用 next.js 框架

我的代码：

firebase.js 文件：

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyAIbAZGEmnB5EMpj7TTR0v0yjK2c1EYJzo",
  authDomain: "comics-app-a4675.firebaseapp.com",
  projectId: "comics-app-a4675",
  storageBucket: "comics-app-a4675.appspot.com",
  messagingSenderId: "963431498351",
  appId: "1:963431498351:web:e1b078045362f3c168039a"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

Viewer.js 文件（我用作成功 url 的页面）：

import Head from 'next/head'
import Reader from '../components/Reader';
import Header from "../components/Header";
import Feed from "../components/Feed";
import Titles from "../components/Titles"
import React, { useState, useEffect } from 'react';

import { getApp } from "@firebase/app";
import { getStripePayments } from "@stripe/firestore-stripe-payments";
import { getProducts } from "@stripe/firestore-stripe-payments";
import { createCheckoutSession } from "@stripe/firestore-stripe-payments";
import { onCurrentUserSubscriptionUpdate } from "@stripe/firestore-stripe-payments";

const app = getApp();
const payments = getStripePayments(app, {
  productsCollection: "products",
  customersCollection: "customers",
});

const products = await getProducts(payments, {
  includePrices: true,
  activeOnly: true,
});
for (const product of products) {
  // ...
}

const session = await createCheckoutSession(payments, {
  price: myPriceId,
});
window.location.assign(session.url);

onCurrentUserSubscriptionUpdate(
  payments,
  (snapshot) => {
    for (const change in snapshot.changes) {
      if (change.type === "added") {
        console.log(`New subscription added with ID: ${change.subscription.id}`);
      }
    }
  }
);
function viewer() {
 
 


return (
        <div>
         <Head>
        <title>Minerva</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
     
        <Header />
          <Reader />  
          
          <div className="pl-28 m-8 text-white">
       <h1 className="text-2xl font-extrabold">Metroid, Chapter 2</h1>
        <p className="font-bold border-b">September 21st, 2021</p>
      </div> 
        
        <Feed />
       
        </div>
    )
}

export default viewer

【问题讨论】：

标签： javascript firebase next.js stripe-payments firebase-extensions

【解决方案1】：

我不确定您是否在 next.config.js 中启用了 topLevelAwait

module.exports = {
  webpack: (config) => {
    config.experiments = config.experiments || {}
    config.experiments.topLevelAwait = true
    return config
  },
}

【讨论】：

谢谢我之前的 next.config.js 文件中没有该代码。但它仍然给我同样的错误
尝试删除您的 .next 构建文件夹，您也可以阅读有关此问题的讨论 github.com/vercel/next.js/discussions/…
非常感谢。我认为这成功了