[Bug]: Font files 500 (Internal Server Error)

[anteksiler]

Please confirm that you have:

• Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
• Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Fonts should work on 127.0.0.0:9292

Actual behavior

Font files are not loaded on the browser.

Stack trace

No response

Reproduction steps

1. Brew uninstall shopify-cli
2. Brew tap shopify/shopify
3. Brew install shopify-cli
4. shopify theme dev

Operating System

Mac OS Ventura

Shopify CLI version (check your project's package.json if you're not sure)

3.36.1

Shell

zsh

Node version (run node -v if you're not sure)

v19.4.0

What language and version are you using in your application?

liquid

[karreiro]

(related to #1103)

[karreiro]

Thank you for reporting this, @anteksiler!

I've tried to reproduce this issue by adding different fonts using the theme editor:

However, it works in my tests. Are you adding fonts with a different approach?

Thanks again for reporting this!

[anteksiler]

Hi @karreiro, the fonts are added the same way. I am not sure why it is not working either; it used to work without any issues. I think I updated developer tools, but sure about that either.

This is what I am seeing when I visit the font url:

[anteksiler]

Updated ruby from 3.1.2 to 3.2.0 and that did not solve it either.

[karreiro]

Thank you for the extra details, @anteksiler!

Could you please share the request ID that appears when the http://localhost:9292 page loads? With that information, I can get much more context about the issue you're facing.

Here's how to get it:

Also, I'm assuming that fonts are not loading on http://localhost:9292 but are working in the preview URL. Is that correct?

Thanks again, @anteksiler!

[anteksiler]

Hey @karreiro, much appreciated. The request ID is:

X-Request-Id: 88b8ac30-db4d-4701-9ce3-be66aaf4981d

Yes, theme preview is working correctly.

[Poitrin]

After installing Shopify CLI via brew, I was able to reproduce the issue, because Homebrew formula just says depends_on "ruby", so that Ruby 3.2 is installed, since ~ EOY 2022.

Alas, Ruby 3.2 includes some breaking changes. I was able to fix this issue in Shopify/shopify-cli#2721, and I hope that it can be released soon.

[dir]

Very quick and dirty fix for those on Mac using Homebrew that need it working...

Not recommended

1. Uninstall shopify-cli using brew uninstall shopify-cli

2. Uninstall ruby using brew uninstall ruby

3. Copy the brew formula code for shopify-cli here: https://github.com/Shopify/homebrew-shopify/blob/master/shopify-cli.rb

4. Create a new .rb file in $(brew --repository)/Library/Taps/homebrew/homebrew-core/Formula/, name it custom-shopify.rb.

5. Change the following lines:

   1. Line 7 (assuming you used the file name custom-shopify.rb), change ShopifyCli to CustomShopify
   2. Line 14 depends_on "ruby" to depends_on "ruby@3.1"
   3. Line 45 Formula["ruby"] to Formula["ruby@3.1"]

6. Run brew install custom-shopify

7. Now you're all set to run shopify commands like before, i.e. shopify theme dev

I would highly recommend uninstalling this using brew uninstall custom-shopify and then brew uninstall ruby@3.1 when an update that addresses this gets released, as this is a "broken" build of Shopify and will not be good for future updates.

Happy coding!

[anteksiler]

Hi @Poitrin , I noticed that you created the PR in CLI version 2.0. Will it also fix the issue in CLI 3.0?

[Poitrin]

Will it also fix the issue in CLI 3.0?

Yeah, in the CLI 2.0’s PR, there's a post-release step to use the then latest 2.0 version in 3.0 :)
But it's usually also done without being mentioned :D

[Poitrin]

Sorry that GitHub closes issues after merging a PR, but I hope that both CLI versions will be released ASAP :)

[OlivierVerhaegen]

Hi everybody,

I'm experiencing the same issue using a VS Code development container.
CLI version: @shopify/cli/3.43.0 linux-x64 node-v18.14.0
Here is my devcontainer.json file

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node
{
	"name": "Node.js",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/javascript-node:0-18",
	"features": {
		"ghcr.io/devcontainers/features/ruby:1": {}
	},

	// Use appPort instead of forwardports because development servers isn't available on host otherwise
	// See: https://containers.dev/implementors/json_reference/#publishing-vs-forwarding-ports
	"appPort": ["0.0.0.0:9292:9292"],

	// Use 'postCreateCommand' to run commands after the container is created.
	"postCreateCommand": "yarn global add @shopify/cli @shopify/theme && shopify --version",
	"extensions": ["Shopify.theme-check-vscode"],
	"containerEnv": {
		"SHOPIFY_FLAG_STORE": "XXX.myshopify.com"
	}

	// Configure tool-specific properties.
	// "customizations": {},

	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	// "remoteUser": "root"
}

The errors i'm getting:

I'm using this command to start the dev server an be able to access it from outside the dev container: shopify theme dev --host 0.0.0.0

Notice the CORS error regarding hot-reload. Could this have something to do with the host being 0.0.0.0? Could this be a problem for accessing the fonts?

Thanks in advace for your answers!

[nelsonvassalo]

Bumping this