Gatsby: Error while building with react-stripe-elements

[brsanthu]

We are trying to integrate Stripe elements (via react-stripe-elements). The checkout form page comes out fine in develop mode and can see our form as well as Stripe form. But when we start the build, we get following error.

Help page says, move the code into componentDidMount to avoid code checking for document/window etc., I could not figure out how to do that. Any help is appreciated.

success Compiling production bundle.js — 18.030 s

error Generating static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND


Error:
Error: It looks like you are trying to inject Stripe context outside of an Elements context.
Please be sure the component that calls createSource or createToken is within an <Elements> component.

- render-page.js:61191 new _class
  render-page.js:61191:16

- render-page.js:14582 ReactCompositeComponentWrapper._constructComponentWithoutOwner
  render-page.js:14582:17

- render-page.js:14569 ReactCompositeComponentWrapper._constructComponent
  render-page.js:14569:20

- render-page.js:14472 ReactCompositeComponentWrapper.mountComponent
  render-page.js:14472:22

- render-page.js:7454 Object.mountComponent
  render-page.js:7454:36

- render-page.js:13683 ReactDOMComponent.mountChildren
  render-page.js:13683:45

- render-page.js:10693 ReactDOMComponent._createContentMarkup
  render-page.js:10693:33

- render-page.js:10560 ReactDOMComponent.mountComponent
  render-page.js:10560:30

- render-page.js:7454 Object.mountComponent
  render-page.js:7454:36

- render-page.js:13683 ReactDOMComponent.mountChildren
  render-page.js:13683:45

[brsanthu]

Help mentions this point as well.

check before calling the code if window is defined so the code doesn’t run while gatsby is building

How can we check if window/document is defined? Because anything I use to check, still throws that error. Is there a better way to check if gatsby is building so we can shortcut the render method?

[KyleAMathews]

I added a code sample to the doc page — lemme know if that helps https://github.com/gatsbyjs/gatsby/pull/2517

[brsanthu]

Thank you @KyleAMathews , that is really helpful. The react-stripe-elements related error is gone but getting this below error.

This error specifically comes from that payment related page. If I remove that page and build it all goes fine.

We are using latest gatsby version 1.9.72. I noticed there is a thread #1846 but solutions in that issue didn't help. Appreciate some on hints on how to move forward.

 TypeError: Cannot read property 'initial' of undefined

 - index.js:22 ExtractTextPlugin.<anonymous>
  [datasert-dotcom]/[extract-text-webpack-plugin]/index.js:22:8

[KyleAMathews]

That's a webpack bug — that there's not a ton we can do other than upgrade to webpack 3 (which we're in process of)

My unhelpful suggestion is to use css-in-js ;-)

[brsanthu]

I'd understand. Css in js, just for that page which uses stripe or all pages?

[brsanthu]

Is there a way to skip building this page and make it completely dynamic? I thought about creating separate html page and putting into static folder but would need to download all react and other dependencies fresh again as that would be like a separate react app.

[KyleAMathews]

https://www.gatsbyjs.org/docs/creating-and-modifying-pages/#creating-client-only-routes

[brsanthu]

I'm still working through this. Will update how it goes.

Btw, any timeframe guestimate for Gatsby 2.0 with Webpack 3.0 integration?

[KyleAMathews]

Btw, any timeframe guestimate for Gatsby 2.0 with Webpack 3.0 integration?

In the next month

[brsanthu]

An update on stripe integration. I re-did the stripe integration using example given on react-stripe-elements repo combined with Kyle's example of skipping rendering during build process, made stripe integration work fine.

So we now have a complete gatsby static site, except for payment details page, which is completely dynamic including posting payment tokens to server, getting activation keys and displaying on screen.

@KyleAMathews thank you for awesome library you created.

I will close the issue now. If anybody reading this, wants to see an real example of stripe integration, ping me at brsanthu at gmail.

[jimmylagp]

Hi guys i have the same problem with react-stripe-elements, but my issue it's different. The message it's this:

[email protected] build /Users/jimmylagp/Projects/Flourish/Projects/flourishMarketing
gatsby build

success delete html and css files from previous builds — 0.023 s
success open and validate gatsby-config — 0.006 s
success copy gatsby files — 0.017 s
success onPreBootstrap — 0.029 s
success source and transform nodes — 0.015 s
success building schema — 0.107 s
success createLayouts — 0.027 s
success createPages — 0.001 s
success createPagesStatefully — 0.034 s
success onPreExtractQueries — 0.001 s
success update schema — 0.077 s
success extract queries from components — 0.079 s
success run graphql queries — 0.028 s
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 2.782 s

success Building CSS — 7.754 s
success Building production JavaScript bundles — 11.777 s

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

Error: It looks like you are trying to inject Stripe context outside of an Elements context.
Please be sure the component that calls createSource or createToken is within an component.

• render-page.js:33313 new _class
  render-page.js:33313:16

• render-page.js:480 d
  render-page.js:480:320

• render-page.js:482 ua
  render-page.js:482:495

• render-page.js:487 a.render
  render-page.js:487:49

• render-page.js:486 a.read
  render-page.js:486:289

• render-page.js:497 renderToString
  render-page.js:497:7

• render-page.js:22869 Object.exports.replaceRenderer
  render-page.js:22869:42

• render-page.js:21530
  render-page.js:21530:39

• Array.map

• render-page.js:21528 module.exports
  render-page.js:21528:26

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: gatsby build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I don't know what happen because the develop mode it works fine.