Next.js 12.0 + Hydrogen 0.3.0

[JulienHe]

Context

Hello folks,
During Hackdays I give a try with Hydrogen and Next.js but it was not ready as Next 11 did not handle React 18. I put some slides together to explain.

Next.js 12 came out a few days ago and it's coming with React 18, it was obvious that I will a try on it.

Troubles during the experiment

react-dom-router not found

While installing Next.js and hydrogen, the first time I try to run the app, the build complain that react-dom-router was not found and I had to install it on my project even tho it was a hydrogen dependency.

Resolution

yarn add react-dom-router fixed the issue.

Unexpected token 'export'

Once I had everything running, I started to import hydrogen in my app

import { ShopifyProvider } from "@shopify/hydrogen/client";

import shopifyConfig from "../shopify.config";

function MyApp({ Component, pageProps }) {
  return (
    <ShopifyProvider shopifyConfig={shopifyConfig}>
      <Component {...pageProps} />
    </ShopifyProvider>
  );
}

export default MyApp;

and I got an error Unexpected token 'export' running and locate in the file node_modules/@shopify/hydrogen/client.js where the code is

export * from './dist/esnext/client';

Resolution

I think this one is more on Next.js as I used a transpiler to resolve it.

const withTM = require("next-transpile-modules")(["@shopify/hydrogen"]);
module.exports = withTM({
  experimental: {
    reactRoot: true,
    concurrentFeatures: true,
    serverComponents: true,
  },
});

This let next-transpile-modules to transpile hydrogen and the error vanished.
From there I was able to build and publish everything on Vercel.

Error: This Hook is not supported in Server Components.

Once I did everything I wanted to make it run, I was really excited to start building with useShopQuery.
So I take the example from the hydrogen template and made it in a way that I can show product.id for now, just to see if I got something.

import React from "react";
import {
  useShopQuery,
  flattenConnection,
  ProductProviderFragment,
} from "@shopify/hydrogen";
import gql from "graphql-tag";

export default function Product() {
  const { data } = useShopQuery({
    query: QUERY,
    variables: {
      numProducts: 3,
      numProductMetafields: 0,
      numProductVariants: 250,
      numProductMedia: 1,
      numProductVariantMetafields: 10,
      numProductVariantSellingPlanAllocations: 10,
      numProductSellingPlanGroups: 10,
      numProductSellingPlans: 10,
    },
  });

  const products = data ? flattenConnection(data.products) : [];
  return (
    <div>
      <h1>Welcome to React Server Components</h1>
      {[products[1], products[2]].map((product) => {
        return <div key={product.id}>{product.id}</div>;
      })}
    </div>
  );
}

const QUERY = gql`
  query indexContent(
    $numProducts: Int!
    $numProductMetafields: Int!
    $numProductVariants: Int!
    $numProductMedia: Int!
    $numProductVariantMetafields: Int!
    $numProductVariantSellingPlanAllocations: Int!
    $numProductSellingPlanGroups: Int!
    $numProductSellingPlans: Int!
  ) {
    products(first: $numProducts) {
      edges {
        node {
          ...ProductProviderFragment
        }
      }
    }
  }

  ${ProductProviderFragment}
`;

and this code produced the following error:

There is no resolution for it for now. I actually try to see if there was a way to bypass the check and I also pinged @jplhomer to explain a bit my situation.

My take on this experimentation

From the documentation, we are saying that Hydrogen is available to be tested with Next.js and also that useShopQuery is used to fetch data.

• I was unaware that useShopQuery wasn't meant to be used in Next.js
• I was unaware that context and related hooks aren't supported in RSC

We probably need to specify that. useShopQuery is not meant to be used with Next.js or even any other framework but Hydrogen.

I hope this is helpful for you! 👨‍💻

[ahmed-adly-khalil]

Hello @JulienHe Maybe Hydrogen stack would be easier to handle without next JS, as react server components handle SSR, hydrogen uses react-router for routing instead of next-router, and vite for dev build which is based on esbuild (Go) and replaces next JS SWC (Rust) based routing.

This is just my opinion and I could be wrong

[JulienHe]

The idea behind the test was to be sure Hydrogen can be used with Next.js. It was part of testing Hydrogen more deeper too.

[JulienHe]

Thanks for your reply!
Each steps, we make Hydrogen better 🙏.

[ahmed-adly-khalil]

Most welcome, happy to part of the discussion 👌

[maacck]

Maybe try to use useShopQuery in getServerSideProps, as Hydrogen use it in server.jsx.

[JulienHe]

I gave a try to see if it was working too.

React Hook "useShopQuery" is called in function "getServerSideProps" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter.eslintreact-hooks/rules-of-hooks

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
error - unhandledRejection: TypeError: Cannot read property 'useContext' of null

Thanks for suggesting it tho!
You help us making Hydrogen better!

[maacck]

https://shopify.dev/custom-storefronts/hydrogen/getting-started?utm_source=exacttarget&utm_medium=email&utm_campaign=Partners_Communications_Hydrogen_Announcement_20211108#step-1-create-a-new-hydrogen-app
The latest version support Next.JS now, but not sure for Next.JS 12.0

[JulienHe]

I'll give a try. I'll keep you posted.

[mattjis]

@JulienHe let us know if you can get it working

[jplhomer]

Hi all! We've put together a short guide on using Hydrogen in Next.js: Shopify/hydrogen#240