Gatsby 5 SSG and SSR no content appearing on build

[graemec23]

I have a bug where If I use CartProvider, either in a Component or in Gatsby-ssr it will stop the HTML being rendered in Gatsby build. Removing the CartProvider fixes issue with content being shown. I have tried adding the CartProvider to gatsby-browser, however that breaks the build as it cant reference redux dispatch.

This is an example of Gatsby-ssr. Im using Gatsby 5, and use-shopping-cart version 3.1.6.

import * as React from 'react';
import { CartProvider } from 'use-shopping-cart';
const stripePromise = process.env.STRIPE_PUBLISHABLE_KEY;

const url = process.env.isDev ? 'http://localhost:8000' : '';

export const wrapPageElement = ({ element, props }) => {
  return (
    <CartProvider
      mode='payment'
      cartMode='checkout-session'
      stripe={stripePromise}
      successUrl={`${url}/success`}
      cancelUrl={`${url}/shop`}
      currency='gbp'
      allowedCountries={['GB']}
      billingAddressCollection={true}
      loading={element}
    >
      {element}
    </CartProvider>
  );
};

[dayhaysoos]

Oh shoot, I'm now seeing this, sorry for the delayed response @graemec23. I'm gonna try taking a look this weekend, thank you for raising the issue!

[jaszczw]

function CartProvider({ loading = null, children, ...props }) {`
  if (!isClient) return null

This won't work in SSR - the examples with loading don't make sense in SSR context as the component will only get rendered on client-side either way.

[dayhaysoos]

@jaszczw yeah, this was intentional and it worked fine on previous versions of Gatsby. I suppose the solution would be to make this library compatible with SSR by upgrading to React 18?

[jaszczw]

But wrapping the whole app in return null means the server doesn't return anything - that's as far away from SSR as possible.

[dayhaysoos]

@jaszczw yeah, I know what you are saying. I'm just not sure why this was working just fine for previous Gatsby versions and why it doesn't work now.

I guess I'm asking for advice, I can't support SSR because use-shopping-cart is still on React version 17, SSR capabilities are only available on React 18, yeah?

I've been so busy at work, I haven't been able to look at it 😭

[dsk52]

I think the story is relevant here, so I am reporting it.
I am using v3.1.8 of this library on React (18.2.0) and Next.js (13.3.1) and it is not working well during SSG/ISR.
I've been downgrading this library version to check and it doesn't seem to work with v3.1.6 or later, I think it's the isClient area of CartProvider that is causing the problem. Is there a plan to fix it?

(Translated at DeepL.)

[dayhaysoos]

I think the story is relevant here, so I am reporting it. I am using v3.1.8 of this library on React (18.2.0) and Next.js (13.3.1) and it is not working well during SSG/ISR. I've been downgrading this library version to check and it doesn't seem to work with v3.1.6 or later, I think it's the isClient area of CartProvider that is causing the problem. Is there a plan to fix it?

(Translated at DeepL.)

Hey @dsk52

I would love to fix it, I've just been too busy. I thought I addressed this in the most recent version.

Can you share the behavior that's happening or is it the same thing as this issue?

[dsk52]

@dayhaysoos
Let me elaborate a bit more.
In the Next.js application I am currently working on, we are using CSR, SSR, and SSG/ISR on different pages.
We are using useShoppingCart() of use-shopping-cart in some pages that use CSR and in the common header of each page.

When I run next build and check the HTML generated as a screen using SSG, the element under body is not generated. I think it is the same as this Issue.
When I reverted this package to v3.1.5, the HTML was generated correctly.
By the way, when I was using v3.1.8, shouldPersist was set to true.

Thank you very much for your time and maintenance.

[dayhaysoos]

Okay thank you @dsk52 for that.

I'm gonna try looking into this on the weekend. I really thought I addressed this but I guess I didn't. Thank you for bringing it up.

If you can't wait, I'm open to PRs, I'll review much quicker. Let me know if you're interested in trying. Otherwise I'll do my best

[dsk52]

Thank you.
I'm sorry. I am concerned about it, but I won't be able to address it for a while, so I would like to leave it to you. I apologize for not being able to help even though you are busy.
If there is any necessary information, I will try to find time to convey it.

[dayhaysoos]

No problem!

Do you think I can reproduce this with a basic Next.js set up? I need to redo my examples because I don't have a more recent Next.js project with the new App Routes.

I'll definitely have time this weekend tho, no worries! I'll report back to you 🫡

[dsk52]

I think I'm ok with the basic setup.
It was happening on the Pages Router, but it might happen on the App Router too.

[dayhaysoos]

Okay thank you, will look into it 🫡

[dayhaysoos]

Just FYI @dsk52 I'm having some very unique troubles with Stripe right now so I'm not able to test. For context, they might have accidentally removed me from the ability to install Stripe SDKs from the npmjs registry. They are trying to help me figure it out, though. Sorry for the delay!

[dayhaysoos]

Hey @dsk52, sorry this took so long. I just got access to the stripe SDks a few days ago.

I just published an alpha that I hope fixes the SSR issue:

https://www.npmjs.com/package/use-shopping-cart/v/3.2.0-alpha.0

if you do npm install --save use-shopping-cart@next it will install 3.2.0-alpha.0 for you

[dsk52]

@dayhaysoos
Thanks for fixing it! That was a lot of work.

I tried running it on v3.2.0-alpha.0 right away.
I checked the SSR, ISR, and SSG pages, and they are all generating correctly! Thank you!

How about Gatsby? I don't have the environment at hand to reproduce it, but I hope it works.

[dayhaysoos]

@dsk52 yes!!! I'm so happy it worked for you!!

I have no idea about Gatsby, not sure when I can make time to test. If you ever decide to try it out would you let me know?