0

When working on localhost development for months, our team has had no issues with hydration mismatch errors. However, when running the out-of-the-box Hydrogen preview command npm run preview, or in a deployed environment via the Shopify Hydrogen plugin, we run into the following (Button is a client component that we have defined ourselves):

error

Code for Button.client.jsx:

export function Button({
  ctaText,
  href,
  id,
  onClick,
  variant = 'primary',
  openNewTab = false,
}) {
  return (
    <a
      id={id}
      className={clsx(
        'btn',
        {
          primary: null,
          secondary: 'btn--reverse',
          tertiary: 'btn--alt',
          dark: 'btn--dark',
        }[variant],
      )}
      // TODO: investigate how we want to have href and onClick fight each other
      href={href}
      onClick={onClick}
      target={openNewTab ? '_blank' : undefined}
      rel={openNewTab ? 'noreferrer' : undefined}
    >
      {ctaText}
    </a>
  );
}

There appears to be some non-determinism or race condition-like behavior around when this error surfaces, but we do know that there is a very quick and seemingly valid initial paint before. We are potentially wondering if it has to do with href, id, onClick, or other properties passed to our button that are causing a hydration mismatch. The minified React presents the a link to the following error: https://legacy.reactjs.org/docs/error-decoder.html/?invariant=418

Seems related to and almost identical to: Error: Could not find client component Shopify hydrogen custom storefront

Stack: Shopify Hydrogen v1 (not v2)

Tried running in higher deployed environments or with npm run preview, expected a result at least somewhat similar to localhost development, instead encountered a massive rabbit hole of hydration mismatch errors

Jake Lindvall
  • 1

0 Answers0