hydrogen-v1: [BUG] Product Detail Page in the Tutorial Causes an Error

Describe the bug When trying to follow the tutorial to build a store from Hydrogen, I faced an issue in the Product Detail page where the app shows an error page and the console shows the errors like in the image I attached in the next section.

The errors are as follow: (I can provide even more detailed error messages if necessary)

Uncaught Error: Router hooks and <Link> component must be used within a <Router> component
The above error occurred in the <ForwardRef(Link)> component:
Uncaught Error: Hydration failed because the initial UI does not match what was rendered on the server.

Some of the attempts that I’ve tried:

Modified ProductOptionsProvider to normal div, thinking that the error might be caused by that component
Removing some parts in the product detail page
Not using typescript for the components related to the Product Detail Page and copied the code from the tutorial page as is (assuming I made a mistake in following the tutorial)

However none of the attempts were successful and the error messages were not really helpful (at least to me with my current understanding of Hydrogen and React).

Considering I follow the tutorial almost as-is and only modifying some TS-related changes (on pages that are already working for me), I think there might be a bug or there might be an issue in the Tutorial Page.

To Reproduce

Initialize the Hydrogen Project with Typescript option
Follow the tutorial in Hydrogen’s page
Get to the Build a Product Page section
Run yarn dev
Go to any page by clicking through the collection and product.

Expected behaviour Should render the product detail page like in the tutorial page.

Screenshots Screen Shot 2022-09-03 at 11 04 05 AM

Hydrogen version: v1.3.0
Node version : v18.7.0
Device details : 2021 Macbook Air M1

About this issue

Original URL
State: open
Created 2 years ago
Reactions: 4
Comments: 16 (7 by maintainers)

Most upvoted comments

I had this same problem when doing the tutorial and I think that I fixed this by adjusting my vite.config.js based on what I was seeing in the demo-store template.

My vite config is:

import hydrogen from '@shopify/hydrogen/plugin';

export default defineConfig({
  plugins: [hydrogen()],
  resolve: {
    alias: [{ find: /^~\/(.*)/, replacement: '/src/$1' }],
  },
});

Adding his resolve key stops the errors here.

+11

phgmenezes on Sep 12, 2022

After some digging I was able to find a solution for this. For those that are still stuck with the error try to go to your vite.config.js file and paste the following config

import {defineConfig} from 'vite';
import hydrogen from '@shopify/hydrogen/plugin';

export default defineConfig({
  plugins: [hydrogen()],
  resolve: {
    alias: [{ find: /^~\/(.*)/, replacement: '/src/$1' }],
  },
});

Credit to this post https://community.shopify.com/c/shopify-discussions/hydrogen-framework-error-something-s-wrong-here/m-p/1847529#M327978

mino9421 on Jan 2, 2023

I’m still experiencing this same problem even with the resolve param. Any other suggestions or what the probable cause might be?

PatrickDFFY on Dec 2, 2022

I had this same problem, sad : (

TransonQ on Sep 28, 2022