hydrogen
hydrogen copied to clipboard
[BUG] demo-store-js isn't a valid template when running yarn create @shopify/hydrogen --template demo-store
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
I've been seeing the same issue too.
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?
Sure. I'll give that a try.
npm does work for me, thanks @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.
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.
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.
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.
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.
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
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:
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.
Ah! Very good to know. Thanks @Francismori7!
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
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({
Try using @shopify/[email protected]
and @shopify/[email protected]
@blittle I've tried all combos possible and the end result is what I've described above.
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.
HI @HumidBrains want to check in on if this is still an issue or I can close the ticket now?
Hi @michenly sorry for the radio silence. Yes, closing the issue.