Uncaught TypeError: Cannot convert undefined or null to object

[bahoffman]

steps - clone repo add Stripe API keys to .env.development Gatsby Develop compiles successfully, no issues.

issue - does not render, console logs - Uncaught TypeError: Cannot convert undefined or null to object at Function.keys () at useCart (shopping-cart.js:1) at ShoppingCartIcon (shopping-cart-icon.js:1) at ShoppingCartIcon (react-hot-loader.development.js:827) at renderWithHooks (react-dom.development.js:16320) at mountIndeterminateComponent (react-dom.development.js:18735) at beginWork$1 (react-dom.development.js:20084) at HTMLUnknownElement.callCallback (react-dom.development.js:362) at Object.invokeGuardedCallbackDev (react-dom.development.js:411) at invokeGuardedCallback (react-dom.development.js:466) at beginWork$$1 (react-dom.development.js:25730) at performUnitOfWork (react-dom.development.js:24638) at workLoopSync (react-dom.development.js:24614) at performSyncWorkOnRoot (react-dom.development.js:24182) at scheduleUpdateOnFiber (react-dom.development.js:23590) at scheduleRootUpdate (react-dom.development.js:26945) at updateContainerAtExpirationTime (react-dom.development.js:26973) at updateContainer (react-dom.development.js:27075) at react-dom.development.js:27663 at unbatchedUpdates (react-dom.development.js:24375) at legacyRenderSubtreeIntoContainer (react-dom.development.js:27662) at render (react-dom.development.js:27756) at app.js:40

[dayhaysoos]

@bahoffman did you close because you figured it out?

[bahoffman]

Apologies. I did not figure it out.

[dayhaysoos]

@bahoffman so basically you are the .env.development file, that's only meant for development. When you run gatsby buildthe environment to "production". If you renamed that file to .env.production you should be able to build. Can you try that out for me?

If this works for you I will reflect that in the Readme, my bad

[bahoffman]

steps - gatsby new nrtG2 https://github.com/dayhaysoos/gatsby-theme-stripe.git cd .\starters\ cd .\gatsby-starter-stripe-storefront\ create .env.development STRIPE_API_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx STRIPE_API_PUBLIC=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx create .env.production STRIPE_API_SECRET=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx STRIPE_API_PUBLIC=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx gatsby develop ... success run queries - 0.169s - 7/7 41.42/s You can now view gatsby-starter-stripe-storefront in the browser. browser shows - TypeError: Cannot convert undefined or null to object

---

THEN tried - steps - gatsby build ... failed Building static HTML for pages - 6.374s ERROR #95312 "localStorage" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

175 | const itemReference = data.allStripeSku.nodes 176 |

177 | let storageReference = JSON.parse(localStorage.getItem('skus')) | ^ 178 | 179 | const [cart, dispatch] = useContext(CartContext) 180 | WebpackError: ReferenceError: localStorage is not defined

Thank you.

[dayhaysoos]

@bahoffman

What version of the starter are you using? I've updated it on npm recently

[bahoffman]

1.0.0 ? from package.json - { "name": "gatsby-starter-stripe-storefront", "version": "1.0.0", "author": "Nick DeJesus", "license": "MIT", "scripts": { "develop": "gatsby develop", "build": "gatsby build", "clean": "gatsby clean" }, "dependencies": { "deepmerge": "^4.1.1", "gatsby": "^2.15.15", "gatsby-theme-stripe-storefront": "*", "react": "^16.9.0", "react-dom": "^16.9.0" }, "devDependencies": { "eslint": "^6.5.1", "eslint-plugin-react": "^7.16.0" } }

[dayhaysoos]

Ah, that's the issue. I actually had to make some corrections on that version:

https://www.npmjs.com/package/gatsby-theme-stripe-storefront

1.1.0 is the most up to date version. Can you upgrade and let me know if the build works for you now?

@bahoffman

[bahoffman]

updated to { "name": "gatsby-starter-stripe-storefront", "version": "1.1.0", "author": "Nick DeJesus", "license": "MIT", "scripts": { "develop": "gatsby develop", "build": "gatsby build", "clean": "gatsby clean" }, "dependencies": { "deepmerge": "^4.1.1", "gatsby": "^2.16.3", "gatsby-theme-stripe-storefront": "*", "react": "^16.10.2", "react-dom": "^16.10.2" }, "devDependencies": { "eslint": "^6.5.1", "eslint-plugin-react": "^7.16.0" } }

No change in result/output.

[dayhaysoos]

@bahoffman you have a repo I can take a look at? I'd like to try to figure this out for you.

[bahoffman]

I just cloned yours and added my API keys - https://github.com/bahoffman/gatsby-theme-stripe

[dayhaysoos]

Hey @bahoffman, I didn't realize you cloned this entire repo. Can you try cloning this instead:

https://github.com/dayhaysoos/gatsby-starter-stripe-storefront

The instructions on that readme pertain only to that repo, this repo is a repo of all themes I make for stripe. Can you please follow up with me after trying this out? I hope this fixes it for you

[bahoffman]

gatsby new stripe-storefront https://github.com/dayhaysoos/gatsby-starter-stripe-storefront cd stripe-storefront npm install (output) npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself. npm WARN ts-pnp@1.1.4 requires a peer of typescript@* but none is installed. You must install peer dependencies yourself. npm WARN graphql-tools@3.1.1 requires a peer of graphql@^0.13.0 but none is installed. You must install peer dependencies yourself. npm WARN gatsby-starter-stripe-storefront@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\watchpack\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\babel-plugin-add-module-exports\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.1 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) add .env.development with API keys add .env.production with API keys

gatsby develop same result.

package.json - { "name": "gatsby-starter-stripe-storefront", "version": "1.0.0", "author": "Nick DeJesus", "license": "MIT", "scripts": { "develop": "gatsby develop", "build": "gatsby build", "clean": "gatsby clean" }, "dependencies": { "deepmerge": "^4.1.1", "dotenv": "^8.1.0", "gatsby": "^2.15.36", "gatsby-theme-stripe-storefront": "^1.1.0", "react": "^16.9.0", "react-dom": "^16.9.0" } }

My business is eCommerce. So, it would be great to have a simple Gatsby solution. Thanks.

[dayhaysoos]

hey @bahoffman. I appreciate your feedback, you're the only person giving me feedback right now on using it. I'm going to spend some time and see if I can get other devs to tell me if they are running into any issues. I'll report back to you here my findings. Things are working for me so I'm not sure what the issue could be.

Can you show me a repo in the mean time, maybe there's small step I forgot to include.

[bahoffman]

https://github.com/bahoffman/stripe-storefront

I'm a bit of a noob. Sorry to cause you any trouble.

[dayhaysoos]

@bahoffman I was able to recreate and found a fix! I need some more time to clean it up. I appreciate you bringing it to my attention

[dayhaysoos]

@bahoffman It should be working, I made an update to the storefront package. here is a sample of it working with the production build and the production env variables:

https://zen-tereshkova-6eed30.netlify.com/

Can you try again and lemme know if the build is successful?

[bahoffman]

I will try it by the end of the day. The link you provide does not work for me. I get a message - Not Found.

[dayhaysoos]

oops, I deleted it for testing another link:

https://focused-morse-56dac2.netlify.com/

@bahoffman

[bahoffman]

https://gatsby-starter-stripe-storefront.kiwiben.now.sh working. Thanks. STEPS - git clone https://github.com/dayhaysoos/gatsby-starter-stripe-storefront cd gatsby-starter-stripe-storefront npm install add Stripe API keys gatsby develop