Javascript 我应该在前端的哪里为我的盖茨比网站加载Stripe？我对Netlify的推动在我当前的执行中崩溃

WebPackageError:找不到元素上下文；您需要在提供者中包装应用程序调用useStripe（）的部分

我正在使用stripe为我正在开发的盖茨比网站募集捐款。它使用firebase作为后端。我成功地接受了当地的捐赠。但当我推到github时，会出现一个网页包错误，因此我的更改将出现在我的live netlify链接上。以下是错误消息的一部分：

5:05:22 PM: success run queries - 80.938s - 42/42 0.52/s
5:05:30 PM: []
5:05:30 PM: failed Building static HTML for pages - 4.832s
5:05:30 PM: error Building static HTML failed for path "/contactDonate/"
5:05:30 PM:   197 | var parseElementsContext = function parseElementsContext(ctx, useCase) {
5:05:30 PM:   198 |   if (!ctx) {
5:05:30 PM: > 199 |     throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
5:05:30 PM:       | ^
5:05:30 PM:   200 |   }
5:05:30 PM:   201 |
5:05:30 PM:   202 |   return ctx;
5:05:30 PM: 
5:05:30 PM:   WebpackError: Could not find Elements context; You need to wrap the part of yo  ur app that calls useStripe() in an <Elements> provider.
5:05:30 PM:   
5:05:30 PM:   - react-stripe.esm.js:199 parseElementsContext
5:05:30 PM:     node_modules/@stripe/react-stripe-js/dist/react-stripe.esm.js:199:1
5:05:30 PM:   
5:05:30 PM:   - react-stripe.esm.js:302 useElementsContextWithUseCase
5:05:30 PM:     node_modules/@stripe/react-stripe-js/dist/react-stripe.esm.js:302:1
5:05:30 PM:   
5:05:30 PM:   - react-stripe.esm.js:319 useStripe
5:05:30 PM:     node_modules/@stripe/react-stripe-js/dist/react-stripe.esm.js:319:1
5:05:30 PM:   
5:05:30 PM:   - contactDonate.js:45 ContactDonate
5:05:30 PM:     src/pages/contactDonate.js:45:27
5:05:30 PM:   
5:05:30 PM: 

Layout.js

/**
 * Layout component that queries for data
 * with Gatsby's useStaticQuery component
 *
 * See: https://www.gatsbyjs.org/docs/use-static-query/
 */

import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { useStaticQuery, graphql } from 'gatsby';
import { FirebaseContext, useAuth } from '../Firebase';
import { Elements } from '@stripe/react-stripe-js';
import { loadStripe } from '@stripe/stripe-js';

import Header from '../Header/header';
import SideMenu from './sideMenu';
import Backdrop from './backdrop';
import Footer from '../Footer/footer';

/**
 * todo frontend: add close sideMenu & backdrop upon navigation from sideMenu link
 * todo frontend: fix the extra spacing to the right of website in mobile view
 * todo frontend: store stripe key as env variable
 * todo frontend: change api key from test to production
 */
let stripePromise;
const loadStripePromise = async () => {
  stripePromise = await loadStripe('STRIPE_SECRET_KEY');
};
loadStripePromise();

const LayoutContainer = styled.div`
  width: 100%;
  height: 100%;
`;

const Layout = ({ children }) => {
  const { user, firebase, loading } = useAuth();
  const [sideMenuIsOpen, setSideMenuIsOpen] = useState(false);
  const data = useStaticQuery(graphql`
    query SiteTitleQuery {
      site {
        siteMetadata {
          title
        }
      }
    }
  `);

  // handle menu toggled event
  // invert value of state
  function menuToggleClickHandler() {
    setSideMenuIsOpen(!sideMenuIsOpen);
  }

  function backdropClickHandler() {
    setSideMenuIsOpen(false);
  }

  if (stripePromise) {
    console.log('stripe promise loaded');
  } else {
    console.log('stripe promises NOT loaded');
  }

  return (
    <FirebaseContext.Provider value={{ user, firebase, loading }}>
      <Elements stripe={stripePromise}>
        <Header
          siteTitle={data.site.siteMetadata.title}
          menuClickHandler={menuToggleClickHandler}
        />
        <SideMenu show={sideMenuIsOpen} />
        {sideMenuIsOpen === true ? (
          <Backdrop click={backdropClickHandler} />
        ) : null}
        <LayoutContainer>
          <main>{children}</main>
          <Footer />
        </LayoutContainer>
      </Elements>
    </FirebaseContext.Provider>
  );
};

Layout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default Layout;

/**
*查询数据的布局组件
*使用Gatsby的useStaticQuery组件
*
*见：https://www.gatsbyjs.org/docs/use-static-query/
*/
从“React”导入React，{useState，useffect}；
从“样式化组件”导入样式化；
从“道具类型”导入道具类型；
从“gatsby”导入{useStaticQuery，graphql}；
从“../Firebase”导入{FirebaseContext，useAuth}；
从'@stripe/react stripe js'导入{Elements}；
从'@stripe/stripe js'导入{loadStripe}；
从“../Header/Header”导入标题；
从“./SideMenu”导入侧菜单；
从“./background”导入背景；
从“../Footer/Footer”导入页脚；
/**
*todo前端：从侧菜单链接导航时添加关闭侧菜单和背景
*todo前端：在移动视图中将额外间距固定在网站右侧
*todo前端：将条带密钥存储为环境变量
*todo前端：将api密钥从测试更改为生产
*/
让脱衣舞表演；
const loadStripePromise=async（）=>{
stripePromise=等待加载STRIPE（'STRIPE_SECRET_KEY'）；
};
loadStripePromise（）；
const LayoutContainer=styled.div`
宽度：100%；
身高：100%；
`;
常量布局=（{children}）=>{
const{user，firebase，load}=useAuth（）；
const[SideMenusOpen，SetSideMenusOpen]=useState（false）；
常量数据=useStaticQuery（graphql`
查询站点标题查询{
场地{
站点元数据{
标题
}
}
}
`);
//句柄菜单切换事件
//反转状态值
函数menutogleclickhandler（）{
setSideMenusOpen（！SideMenusOpen）；
}
函数backdropClickHandler（）{
setSideMenuIsOpen（假）；
}
if（stripePromise）{
log（'stripe promise loaded'）；
}否则{
log（“未加载条带承诺”）；
}
返回(
{sideMenuIsOpen===true(
)：null}
{儿童}
);
};
Layout.propTypes={
子项：PropTypes.node.isRequired，
};
导出默认布局；

package.json

{
  "name": "gatsby-starter-default",
  "private": true,
  "description": "A simple starter to get up and developing quickly with Gatsby",
  "version": "0.1.0",
  "author": "SasheemDev <sasheem@sasheemdev.com>",
  "dependencies": {
    "@stripe/react-stripe-js": "^1.1.2",
    "@stripe/stripe-js": "^1.3.1",
    "axios": "^0.19.2",
    "firebase": "^7.8.2",
    "gatsby": "^2.19.7",
    "gatsby-background-image": "^0.10.2",
    "gatsby-firesource": "^2.0.3",
    "gatsby-image": "^2.2.39",
    "gatsby-plugin-google-fonts": "^1.0.1",
    "gatsby-plugin-manifest": "^2.2.39",
    "gatsby-plugin-offline": "^3.0.32",
    "gatsby-plugin-react-helmet": "^3.1.21",
    "gatsby-plugin-react-svg": "^3.0.0",
    "gatsby-plugin-remote-images": "^2.1.0",
    "gatsby-plugin-sass": "^2.1.28",
    "gatsby-plugin-sharp": "^2.4.3",
    "gatsby-plugin-smoothscroll": "^1.1.0",
    "gatsby-source-filesystem": "^2.1.46",
    "gatsby-transformer-sharp": "^2.3.13",
    "moment": "^2.24.0",
    "node-sass": "^4.13.1",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-date-picker": "^8.0.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-tabs": "^3.1.0",
    "styled-components": "^5.0.1"
  },
  "devDependencies": {
    "prettier": "^1.19.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  }
}

{
“名称”：“盖茨比起动器默认值”，
“私人”：没错，
“描述”：“与盖茨比一起迅速崛起和发展的简单开端”，
“版本”：“0.1.0”，
“作者”：“SasheemDev”，
“依赖项”：{
“@stripe/react stripe js”：“^1.1.2”，
“@stripe/stripe js”：“^1.3.1”，
“axios”：“^0.19.2”，
“firebase”：“^7.8.2”，
“盖茨比”：“^2.19.7”，
“盖茨比背景图像”：“^0.10.2”，
“盖茨比火源”：“^2.0.3”，
“盖茨比形象”：“^2.2.39”，
“盖茨比插件谷歌字体”：“^1.0.1”，
“盖茨比插件清单”：“^2.2.39”，
“盖茨比插件离线”：“^3.0.32”，
“盖茨比头盔”：“^3.1.21”，
“盖茨比插件反应svg”：“^3.0.0”，
“盖茨比插件远程图像”：“^2.1.0”，
“盖茨比插件sass”：“^2.1.28”，
“盖茨比”插件“^2.4.3”，
“盖茨比插件平滑滚动”：“^1.1.0”，
“盖茨比源文件系统”：“^2.1.46”，
“盖茨比变形金刚”：“^2.3.13”，
“时刻”：“^2.24.0”，
“节点sass”：“^4.13.1”，
“道具类型”：“^15.7.2”，
“反应”：“^16.12.0”，
“反应日期选择器”：“^8.0.0”，
“react dom”：“^16.12.0”，
“反应头盔”：“^5.2.1”，
“反应选项卡”：“^3.1.0”，
“样式化组件”：“^5.0.1”
},
“依赖性”：{
“更漂亮”：“^1.19.1”
},
“关键词”：[
“盖茨比”
],
“许可证”：“麻省理工学院”，
“脚本”：{
“建造”：“盖茨比建造”，
“开发”：“盖茨比开发”，
“格式”：“更漂亮——写\”***.{js，jsx，json，md}\”，
“开始”：“npm运行开发”，
“发球”：“盖茨比发球”，
“干净”：“盖茨比干净”，
“测试”：“echo\”写测试！->https://gatsby.dev/unit-testing\“&&退出1”
},
“存储库”：{
“类型”：“git”，
“url”：”https://github.com/gatsbyjs/gatsby-starter-default"
},
“臭虫”：{
“url”：”https://github.com/gatsbyjs/gatsby/issues"
}
}

gatsby-browser.js/gatsby-ssr.js

const stripePromise = loadStripe('pk_test_kfC9T');

export const wrapPageElement = ({ element, props }) => {
  return (
    <Elements stripe={stripePromise}>
      <Layout {...props}>{element}</Layout>
    </Elements>
  );
};

const stripePromise=loadStripe（'pk_test_kfC9T'）；
export const wrapPageElement=（{element，props}）=>{
返回(
{element}
);
};

这可能是由于元素提供程序组件的设置方式，在盖茨比中的设置方式有所不同。更多信息请参见：

修复方法是从项目根目录中的

gatsby browser.js

文件导出

wraprootement

函数[0]。默认情况下，Gatsby CLI会创建此文件，但如果出于任何原因它不在那里，则需要添加它

在

gatsby browser.js中，包含如下条带：

import React from "react"

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

const stripePromise = loadStripe('pk_test_xyz');

export const wrapRootElement = ({ element }) => {
  return (
    <Elements stripe={stripePromise}>
      {element} 
    </Elements>      
  )
}

从“React”导入React
从'@stripe/stripe js'导入{loadStripe}；
从'@stripe/react stripe js'导入{Elements}；
常量stripePromise=loadStripe（'pk_test_xyz'）；
导出常量wraproteElement=（{element}）=>{
返回(
{element}
)
}

确保用您自己的可发布密钥替换
pk\u test\u xyz
：

一旦安装到位，您就可以从
Layout.js
组件中删除与条带相关的代码

那就够了

[0]
不要发布代码、数据、错误消息等的图像-复制或在问题中键入文本。
import React from "react"

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

const stripePromise = loadStripe('pk_test_xyz');

export const wrapRootElement = ({ element }) => {
  return (
    <Elements stripe={stripePromise}>
      {element} 
    </Elements>      
  )
}