Skip to content

Conversation

@graygilmore
Copy link
Contributor

@graygilmore graygilmore commented Nov 12, 2025

WHY are these changes introduced?

Re: https://community.shopify.dev/t/images-in-theme-app-extension-break-after-upgrading-to-shopify-cli-v3-87-0/25200

Images are failing to load in theme app extensions.

WHAT is this pull request doing?

Our wrapper around fs's readFile sets a default of {encoding: 'utf8'} to the options. This will cause any binary files (like images or fonts) to not be read properly.

There isn't a way to disable the encoding based on how the function is currently typed so I'm switching to fs's version of readFile which will handle all file types correctly automatically.

How to test your changes?

  1. Install the snapped version npm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20251112222441
  2. Navigate to an app that contains a theme app extension
  3. Ensure the theme app extension contains an image and the image is being rendered somewhere in the code
  4. Run shopify app dev
  5. Navigate to the admin of your dev store and got to Online Store
  6. Customize a theme and add your theme app extension to it
  7. Ensure the image loads properly
  8. Bonus: to know for sure that this PR is fixing the issue you can reinstall the latest version of the Shopify CLI, go through the same steps, and ensure that the image doesn't load correctly
v3.87.2 v0.0.0-snapshot-20251112222441
image image

Checklist

  • I've considered possible cross-platform impacts (Mac, Linux, Windows)
  • I've considered possible documentation changes

Our wrapper around fs's `readFile` sets a default of `{encoding:
'utf8'}` to the options. This will cause any binary files (like images
or fonts) to not be read properly.

There isn't a way to disable the encoding based on how the function is
currently typed so I'm switching to fs's version of `readFile` which
will handle all file types correctly automatically.
@graygilmore
Copy link
Contributor Author

/snapit

@github-actions
Copy link
Contributor

🫰✨ Thanks @graygilmore! Your snapshot has been published to npm.

Test the snapshot by installing your package globally:

npm i -g --@shopify:registry=https://registry.npmjs.org @shopify/cli@0.0.0-snapshot-20251112222441

Caution

After installing, validate the version by running just shopify in your terminal.
If the versions don't match, you might have multiple global instances installed.
Use which shopify to find out which one you are running and uninstall it.

@github-actions
Copy link
Contributor

Coverage report

St.
Category Percentage Covered / Total
🟡 Statements 79.23% 13582/17143
🟡 Branches 73.11% 6631/9070
🟡 Functions 79.37% 3505/4416
🟡 Lines 79.58% 12827/16118
Show files with reduced coverage 🔻
St.
File Statements Branches Functions Lines
🟢
... / ConcurrentOutput.tsx
98.36% (-1.64% 🔻)
92% (-4% 🔻)
100%
98.33% (-1.67% 🔻)

Test suite run success

3356 tests passing in 1372 suites.

Report generated by 🧪jest coverage report action from 9b97dfa

@graygilmore graygilmore marked this pull request as ready for review November 12, 2025 22:37
@graygilmore graygilmore requested review from a team as code owners November 12, 2025 22:37
Copy link
Contributor

@gonzaloriestra gonzaloriestra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch, thanks!

@graygilmore graygilmore added this pull request to the merge queue Nov 13, 2025
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Nov 13, 2025
@graygilmore graygilmore added this pull request to the merge queue Nov 13, 2025
Merged via the queue into main with commit 4394067 Nov 13, 2025
26 checks passed
@graygilmore graygilmore deleted the gg-fix-tae-images branch November 13, 2025 18:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants