[BUG] ShopifyProvider throws an error when used in remix

[wintersieck]

Describe the bug
We're using hydrogen inside remix, with the goal of using most/all hydrogen functionality except for useShopQuery (following similar logic to this discussion). Since many hooks such as useCart require a ShopifyProvider, we intend to wrap most of our app in a ShopifyProvider in our remix root.tsx.

The issue is that ShopifyProvider calls useServerRequest, which then tries to useContext(RequestContextSSR), which fails with ReferenceError: __HYDROGEN_TEST__ is not defined from this line. This path isn't necessary for us anyway, since we're making all our server-side calls in a remix loader, we just need ShopifyProviderClient (which sets up ShopifyContext).

Workarounds we've tried or considered on our side:

1. Directly use ShopifyProviderClient instead of ShopifyProvider. Two issues: it's not exported (as far as we can tell), and since the file is named ShopifyProvider.client.js, remix won't include it in the server bundle (this one took a while to figure out 😅).
2. Include ShopifyContext from here and set it ourselves. This does work 🎉, except it's not exported outside of hydrogen, and feels a little hacky.
3. Set up our own ServerRequestProvider to try to get useServerRequest to pass without error. We didn't test this method, since it's not exported either and seems the same as option 2 but harder.

Two ideas to fix it in hydrogen:

1. Change ShopifyProvider to not call useServerRequest if a shopifyConfig prop is passed. This looks pretty straightforward at first glance, changing here and here.
2. Export ShopifyProviderClient and guide people to use that directly in remix/next.

To Reproduce

Minimal reproduction: https://github.com/wintersieck/remix-hydrogen-issue. It's just npx create-remix, version bumped to React 18, with hydrogen installed and added to root.tsx.

Expected behaviour
Be able to use ShopifyProvider in a remix app, or a similar path to set up context for client-side components and hooks to work.

Screenshots

Additional context

• Hydrogen version: 1.0.0
• Remix version: 1.6.1

[blittle]

Thank you for reporting this! The problem with #1 is that when running in Hydrogen, if the prop is provided, we still need to put that on the request because that is how other server components get at the data (server components don't have real context at the moment). ShopifyProviderClient makes more sense to be the framework agnostic component within hydrogen-ui. Thoughts @frehner?

[frehner]

Yeah there is still a lot to be done to remove the framework-specific parts out of components, to make them agnostic. @elisenyang can give more details about the timeline of when we will start working on this effort again.

[matheusgrieger]

The same issue happens when trying to run on Next.js. Using hooks such as useCart doesn't work because of the aforementioned problems.

[benjaminsehl]

Thanks, @matheusgrieger, we’re aware — the components and hooks are not decoupled from the framework yet, but it's something we’ve been working on. We’ve been first focused on built a single great end-to-end experience for our 1.0 launch—but we’re fans of both Remix & Next and will be bringing most of our providers, hooks, components, and utilities to both of them soon. We’re looking at supporting other frameworks in the future as well.

[edword]

For folks interested in side-stepping the RSC/SSR aspects of ShopifyProvider, here's a workaround if you're comfortable with tweaking webpack (Nextjs, Gatsby) or overriding esbuild (Remix) 🔧

1. Create local copies of the foundation ShopifyProvider and/or LocalizationProvider components, remove all SSR/RSC functionality and update as needed for your use case

2. Utilize webpack's normalModuleReplacement plugin (not sure what the equivalent of this would be in esbuild) to replace any ShopifyProvider.server import calls with your custom Provider :

      plugins.normalModuleReplacement(
        /\/ShopifyProvider\/ShopifyProvider.server$/,
        path.resolve(__dirname, '../../context/ShopifyCustomProvider/index.ts')
      ),
      plugins.normalModuleReplacement(
        /\/ShopifyProvider$/,
        path.resolve(__dirname, '../../context/ShopifyCustomProvider/index.ts')
      )

This should allow for basic foundation usage of Providers, Cart hooks etc.

Gatsby implementation in the wild : projectn95

[elisenyang]

We now have a version of ShopifyProvider that does not use RSC available in the Hydrogen UI package!