嗨，我一直在嘗試使用 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 檔案（我用作成功網址的頁面）：
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
uj5u.com熱心網友回復：
我不確定你是否topLevelAwait在 next.config.js 中啟用
module.exports = {
webpack: (config) => {
config.experiments = config.experiments || {}
config.experiments.topLevelAwait = true
return config
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/366000.html
標籤：javascript 火力基地 下一个.js 条纹支付 火力扩展
上一篇：Firebase上傳保護