条带结帐会话与 Firebase ***等待错误的集成
Posted
技术标签:
【中文标题】条带结帐会话与 Firebase ***等待错误的集成【英文标题】：Stripe checkout session integration with firebase top-level-await error 【发布时间】：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
【问题讨论】：
【参考方案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/… 非常感谢。我认为这成功了以上是关于条带结帐会话与 Firebase ***等待错误的集成的主要内容，如果未能解决你的问题，请参考以下文章