@shopify/cli-hydrogen 7.0 prevents custom fonts from loading correctly.

[HumidBrains]

What is the location of your example repository?

No response

Which package or tool is having this issue?

CLI

What version of that package or tool are you using?

7.0.0

What version of Remix are you using?

2.5.1

Steps to Reproduce

Upgrade the CLI from 6.1.1 to 7.0.0

Expected Behavior

I expect custom fonts to load without issues.

Actual Behavior

Custom fonts won't load correctly. Few will, most won't. Downgrading to 6.1.1 solves the problem. I can use the latest version of Hydrogen (2024.1.0) and the latest version of remix-hydrogen (2.0.3). The CLI causes this issue by itself.

[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. Shopify/cli#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/cli-hydrogen@7.1.0 and @shopify/cli@3.52.0

[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 (#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.