hydrogen example-shop throws error initally

[pannagger]

Hi again,

finally we decided to restart the shop implementation based on the newest example shop, however after installing and setting up as described in the "Getting started" toturial we face an instable website, throwing an the error attached most of the time. Really don't get this tool, what do we do wrong?

Kind regards, Philip Pannagger

Discussed in https://github.com/Shopify/hydrogen/discussions/1983

^{Originally posted by **pannagger** August 13, 2022} Hi all, I started implementing a webshop beginning this year and it worked pretty well, I paused for an half year and now the useShopQuery hook does not work anymore, without changing anything in the code. I get the Error "Field metafields is missing required arguments: identifiers at Module.useShopQuery (node_modules/@shopify/hydrogen/dist/esnext/hooks/useShopQuery/hooks.js:52:23[...]". What I found is this https://shopify.dev/changelog/the-behavior-of-hasmetafields-metafields-has-changed , which may be the problem, however solving it is not trivial for me because I started it on the basis of the "Getting started with Hydrogen" application and this example uses the ProductProviderFragment in its Query. So to edit the ProductProviderFragment I have to modify a library file of Hydrogen which seem not to be a aliquot solution. So I am asking myself, am I the only one facing this problem? I did not find any other on the ethernet. How can I solve this problem since there is a lot of work in this project I do not want to start at skratch? Am I missing something, how can it be that shopify changes such critical things like the API interface so my app is not executable anymore? Since this would have cause loads of costs if I had delivered the project to my costumer. I am pretty sure I miss some understanding using hydrogen and the getting started guide. I am kind of deprecated and extremly thankful for any help on this. Kind regards Philip

[frehner]

Hello! Can you provide a reproduction of this issue?

One easy way would be to modify the example shop at https://hydrogen.new

Thanks!

[pannagger]

Hello,

i did not modify the example shop at all, all i did is creating it with „npm init @shopify/hydrogen“, chose „Demo Store“, tried both typescript and javascript and started it running „npm run dev“. And when i call localhost:3000 multiple times I get this error.

kind regards Philip

[frehner]

Hi @pannagger , this should work if you are using the latest version of node 16 or 18; please ensure you're using one of those and it should work for you.

[pannagger]

Hi i checked and all i do is this: and then I open chrome and call localhost:3000, and it works on the first try, but when I refresh the page using F5 I get this:

[frehner]

Hello, please update your version of node 16 to the latest release (16.17.0 as of writing this) and try again.

[pannagger]

hi still get this 404 message is this normal? other than that it works fine now thank you

[frehner]

still get this 404 message is this normal?

404 message should only occur if you are on a route that doesn't have a corresponding route handler in your routes folder.

[pannagger]

So as shown, de console messages stays the same even if the client works perfect and the browser renders the application correctly. This 404 only appears on the server console because the router wants to load localhost:3000/sw.js, so this is the service worker isn’t it? However I ignored this for now since everything else works perfectly. the error appears initially from the demo shop.

[modulareverything]

I'm getting the same on a clean install of Hydrogen.

Steps to reproduce:

yarn create @shopify/hydrogen
cd hydrogen-folder
yarn install
yarn dev

node --version
v18.12.1

[modulareverything]

Tried this using npm instead (copied from here: https://hydrogen.shopify.dev/)

npm init @shopify/hydrogen

The demo-store actually works fine here, but it seems to be loading in some totally different version? Before I saw the title "SNOWDEVIL"(?) before the page crashed and the layout was totally different. Now I get this layout and it works fine: