[BUG] demo-store-js isn't a valid template when running yarn create @shopify/hydrogen --template demo-store

[tomorrowagency-jay]

Describe the bug When following the documentation here I'm getting some bold text in the terminal that tells me that demo-store-js isn't a valid template when running yarn create @shopify/hydrogen --template demo-store

To Reproduce In terminal run yarn create @shopify/hydrogen --template demo-store Add your relevant project name and you should get a read out like the below text

Scaffolding Hydrogen app in /Users/jaylarson/git/project-name...
? demo-store-js isn't a valid template. Please choose from below: … 
❯ hydrogen

Expected behaviour I expect to load the demo store template that includes the updated folder/component structure that can be viewed here: https://github.com/Shopify/hydrogen/tree/v1.x-2022-07/templates/demo-store/src

[cavellblood]

I've been seeing the same issue too.

[jplhomer]

Hi all! We're investigating an issue with yarn currently. Could you try:

npm init @shopify/hydrogen -- --template demo-store
# or
npx @shopify/create-hydrogen -- --template demo-store

And see if you get the correct results?

[cavellblood]

Sure. I'll give that a try.

[tomorrowagency-jay]

npm does work for me, thanks @jplhomer

[jplhomer]

Dope. @tomorrowagency-jay or @cavellblood did you by chance ever run the yarn create hydrogen-app or npx create-hydrogen-app in the past? The reason I ask is that it's our old CLI, and I'm curious if it's a local yarn caching issue or something more annoying.

[cavellblood]

Yes, I think I did run yarn create hydrogen-app in the past. I also believe I tried clearing the local cache but I might not have done it correctly.

[tomorrowagency-jay]

I have as well, I was also under the assumption that it may have been cached so I ran yarn cache clean but ended up with the same results when attempting it yesterday.

[jplhomer]

Ahh OK that is helpful. I mean, I tried burning my local cache with a torch but yarn still persists with the outdated version 🙃 🔥

Appreciate the report.

[cavellblood]

I removed the .yarn directory in my ~/ and I also did yarn set version stable. Now yarn -v shows 3.2.1 and when I run yarn create @shopify/hydrogen I get the following:

~/webdev/sites via  v16.15.1
❯ yarn create @shopify/hydrogen
➤ YN0000: ┌ Resolution step
➤ YN0032: │ keytar@npm:7.9.0: Implicit dependencies on node-gyp are discouraged
➤ YN0032: │ node-addon-api@npm:4.3.0: Implicit dependencies on node-gyp are discouraged
➤ YN0000: └ Completed in 3s 506ms
➤ YN0000: ┌ Fetch step
➤ YN0013: │ wrap-ansi@npm:7.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ wrappy@npm:1.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ xtend@npm:4.0.2 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yallist@npm:4.0.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0013: │ yauzl@npm:2.10.0 can't be found in the cache and will be fetched from the remote registry
➤ YN0000: └ Completed in 11s 157ms
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0007: │ keytar@npm:7.9.0 must be built because it never has been before or the last one failed
➤ YN0000: └ Completed in 0s 804ms
➤ YN0000: Done with warnings in 15s 508ms

✔ Name your new Hydrogen storefront · new-hydro-104
? Choose a template …
> Demo Store
  Demo Store (TypeScript)
  Hello World
  Hello World (TypeScript)

So I probably did more than I needed to but it's working now.

[cavellblood]

A quick follow-up: When I said it's working I was referring to that it was allowing me to choose the correct template for the Demo Store.

So I was running Yarn version 3.2.1 and ran yarn dev in the project file it gave me this error:

webdev/sites/new-hydro-105 via  v16.15.1
❯ yarn dev

━━━━━━ Error ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
    command hydrogen:dev not found

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

It also showed this error message when running yarn before running yarn dev:

❯ yarn
➤ YN0000: ┌ Resolution step
➤ YN0002: │ @shopify/cli-hydrogen@npm:3.0.24 doesn't provide react (p4f84e), requested by @shopify/hydrogen
➤ YN0002: │ @shopify/cli-hydrogen@npm:3.0.24 doesn't provide react-dom (p02c6c), requested by @shopify/hydrogen
➤ YN0002: │ new-hydro-104@workspace:. doesn't provide graphql (p4d559), requested by graphql-tag
➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0000: └ Completed
➤ YN0000: ┌ Link step
➤ YN0000: │ ESM support for PnP uses the experimental loader API and is therefore experimental
➤ YN0000: └ Completed
➤ YN0000: Done with warnings in 0s 385ms

So I thought that maybe it was an issue with Yarn version 3.2.1 so I nuked the .yarn directory in my home folder and the .yarnrc and .yarnrc.yml in my home folder. Then I set my yarn version back to classic with yarn set version classic which then put it back at:

❯ yarn -v
1.23.0-20220130.1630

But alas it doesn't let me chose the demo-store template still. Output:

❯ yarn create @shopify/hydrogen --template demo-store
yarn create v1.23.0-20220130.1630
warning package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "@shopify/[email protected]" with binaries:
      - create-hydrogen
[##################################################################################################################################] 517/517?
✔ Project name: · new-hydro-108

Writing files...
? demo-store isn't a valid template. Please choose from the available options: …
❯ hydrogen

[vlucas]

Confirmed this is still an issue with 1.0.2:

yarn create @shopify/hydrogen --template demo-store-ts
yarn create v1.22.17
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Installed "@shopify/[email protected]" with binaries:
      - create-hydrogen
✔ Project name: · test

Writing files...
✔ demo-store-ts isn't a valid template. Please choose from the available options:

[Francismori7]

As mentioned by David, I had two versions of the Shopify Hydrogen Create-app module installed globally, since I've been working with the very initial versions of Hydrogen:

$ yarn global list
yarn global v1.22.19
warning package.json: No license field
info "@shopify/[email protected]" has binaries:
   - create-hydrogen
info "[email protected]" has binaries:
   - create-hydrogen
   - create-hydrogen-app
Done in 0.70s.

I used the following and it fixed it:

yarn global remove @shopify/create-hydrogen
yarn global remove create-hydrogen-app

After that, the following worked just fine:

yarn create @shopify/create-hydrogen --template demo-store-ts

TLDR: Yarn installs the CLI modules to your global packages list. And create-hydrogren-app collides with @shopify/create-hydrogen, so if you worked with the CLI or have create a Hydrogen project in the past, you need to manually remove the global packages.

[cavellblood]

Ah! Very good to know. Thanks @Francismori7!

[frandiox]

Have you tried the code in production? Does it work? CLI 7.0.0 should be more similar to production so maybe it's just showing a real problem in your code. Or perhaps is an actual bug in our dev runtime.

In any case, we are using custom fonts in the demo-store journal: https://hydrogen.shop/journal/our-story

I just tried that locally and it also seem to work in 7.0.0:

---

The code for this is here: https://github.com/Shopify/hydrogen/blob/main/templates/demo-store/app/styles/custom-font.css

[HumidBrains]

Hi @frandiox, I had to put this on hold, I apologise for not responding until now.

My code seems fine in both dev and production. There is a clear cut between upgrading the hydrogen-cli or not. Some fonts load, some don't. The fonts that load successfully lose their styling, e.g. font-weight.

Maybe related could be that I cannot upgrade the shopify-cli to more than 3.53.0 because 3.54.0 breaks the build, which seems to be due to the upgrade of the oclif version. So if the shopify-cli and shopify-hydrogen-cli aren't in sync, maybe that's the culprit.

Here is an issue related to the shopify-cli problem, but in my case it doesn't matter what package manager I use, I still get the same error if upgrading the shopify-cli. https://github.com/Shopify/cli/issues/3004

My error looks like this: config.plugins.map is not a function To investigate the issue, examine this stack trace: at registerCleanBugsnagErrorsFromWithinPlugins (@shopify/cli-hydrogen/node_modules/@shopify/cli-kit/src/public/node/error-handler.ts:170) config.plugins.map(async (plugin) => {at init (@shopify/cli-hydrogen/node_modules/@shopify/cli-kit/src/public/node/base-command.ts:40) await registerCleanBugsnagErrorsFromWithinPlugins(this.config) at async runCLI (@shopify/cli-kit/src/public/node/cli.ts:88) await run(undefined, options.moduleURL) at async runShopifyCLI (@shopify/cli/src/index.ts:42) await runCLI({

[blittle]

Try using @shopify/[email protected] and @shopify/[email protected]

[HumidBrains]

@blittle I've tried all combos possible and the end result is what I've described above.

[frandiox]

config.plugins.map is not a function

I think this error is now fixed in the latest release (https://github.com/Shopify/hydrogen/issues/1734). Try updating with h2 upgrade.

My code seems fine in both dev and production. There is a clear cut between upgrading the hydrogen-cli or not. Some fonts load, some don't. The fonts that load successfully lose their styling, e.g. font-weight.

If this is still the case after the upgrade, can you make a small reproduction? The CLI should now be closer to production, also in the area of serving assets but there might be a bug. Also, if it's still a problem, try with --legacy-runtime flag if you want to keep the original behavior until we fix this.

[michenly]

HI @HumidBrains want to check in on if this is still an issue or I can close the ticket now?

[HumidBrains]

Hi @michenly sorry for the radio silence. Yes, closing the issue.