Gatsby, Stripe: 'Uncaught TypeError: Cannot read property 'configure' of undefined' when trying to implement payment button

Gatsby official document is being developed in line with the EC site construction tutorial.
However, if you write checkout.js as shown in the tutorial, the following error will appear and the entire screen will be blank.

Uncaught TypeError: Cannot read property 'configure' of undefined
The above error occurred in the <Checkout>component:
The above error occurred in the <LocationProvider> component:
GET http://localhost:8000/.../src/components/checkout.js404 (Not Found)

Specifically Uncaught TypeError: Cannot read property 'configure' of undefined and 404 errors.

Just to be sure, I rewritten the other files using CSS-in-JS library, styled-components, but only the fabicon was displayed, and the error statement became Uncaught Error: The styleprop expectations a mapping from properties to values, not a string.For example, style={marginRushing+casing}

I tried to change the index.js file from the code I was writing to exactly the same code as the tutorial article, but there was no change.
If the checkout.js component is not loaded and disabled, the rest will be displayed without any problems. Is there any solution?