Где на внешнем интерфейсе я должен загрузить LoadStripe для моего сайта Gatsby? Мой pu sh to Netlify падает с моим текущим расширением - PullRequest
Новая
       6

Где на внешнем интерфейсе я должен загрузить LoadStripe для моего сайта Gatsby? Мой pu sh to Netlify падает с моим текущим расширением

1 голос
/ 14 апреля 2020

WebpackError: Не удалось найти контекст элементов; Вам нужно обернуть часть вашего приложения, которая вызывает useStripe (), у провайдера

Я использую полосу для сбора пожертвований для разрабатываемого мной сайта Gatsby. Он использует FireBase в качестве бэкэнда. Я успешно принимаю пожертвования с полосой на месте. Но я получаю сообщение об ошибке webpack, когда я отправляю github sh, чтобы мои изменения были в моей прямой ссылке на 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:

Кажется, ошибка связана с тем, как я загружаюStripe. Я вызываю loadStripe с помощью моего ключа stripe publi c в моем компоненте Layout, потому что он отображается на каждой странице, и я следую инструкциям из этой документации, предоставленным stripe. Stripe Docs

Я также попытался сделать асин c вызов, потому что я видел это в документации здесь. Но даже это не похоже на работу. Кроме того, я зашел на мою страницу ContactDonate, где я использую компоненты чередования и использовал там loadStripe, но это дало мне ошибку. Казалось излишним снова загружать чередование полос на моей ContactPage, когда я уже делаю это в своем компоненте Layout. Stripe Docs asyn c

Все приложение работает локально (с или без asyn c вызов loadStripe), поэтому я предположил, что загружал полосу правильно. Дайте мне знать, если я могу предоставить какие-либо другие детали о моем проекте.

Я даже пытался сменить полоску с тестового на живой. Это тоже не работает.

В приведенной ниже реализации макета используется asyn c для loadStripe. До этого у меня была только следующая строка. 

const stripePromise = loadStripe('STRIPE_SECRET_KEY');

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;

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"
  }
}

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>
  );
};

1 Ответ

3 голосов
/ 15 апреля 2020

Это, вероятно, связано с тем, как настроен компонент Elements Provider, что должно быть сделано немного по-другому в Gatsby. Подробнее об этом здесь:

https://www.gatsbyjs.org/blog/2019-01-31-using-react-context-api-with-gatsby/

Исправление будет заключаться в экспорте функции wrapRootElement [0] из файла gatsby-browser.js в root вашего проекта. CLI Gatsby создает этот файл по умолчанию, но если по какой-либо причине его там нет, вам нужно будет добавить его.

В gatsby-browser.js включите Stripe следующим образом: 

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>      
  )
}

Убедитесь, что чтобы заменить pk_test_xyz своим собственным публикуемым ключом: https://dashboard.stripe.com/test/apikeys

Как только это будет на месте, вы можете удалить связанный с Stripe код из вашего Layout.js компонента.

Это должно сделать это!

[0] https://www.gatsbyjs.org/docs/browser-apis/#wrapRootElement

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...