Shopify app's theme app extension does not reflect code changes on the browser.
I am making a Shopify application using the default RemixJS, Prisma, Polaris setup in Node.js.
By running shopify app init.
To add some functionality, I created a THEME APP EXTENSION by running:
shopify app generate extension
But the issue is, if I make any changes to the code of the theme—for example, any file in the assets folder or any Liquid file—these are not reflected in the browser.
Sometimes the changes are reflected immediately, sometimes they take minutes or hours.
I have tried these approaches to solve it:
Hard refreshing the browser.
Disabling cache in the browser network tab.
Running shopify app deploy after creating the extension and sometimes after making any changes to the app extension code.
Killing and restarting the dev server: pnpm run dev
- Sometimes the cli says it capture the change and update the draft. But event then I can't see the changes appear on the browser.
None of these methods work consistently, and it is extremely frustrating.
shopify cli version: 3.80.7
pnpm version: 10.12.1
OS: ubuntu
Here is a github repo:
https://github.com/ss-joy/shopify-theme-extension-issue
Here is a video showing the issue:
https://www.awesomescreenshot.com/video/40815750?key=501678ffe60be0609081dc00099b8496
code tree:
. ├── app │ ├── db.server.ts │ ├── entry.server.tsx │ ├── globals.d.ts │ ├── root.tsx │ ├── routes │ │ ├── app.additional.tsx │ │ ├── app._index.tsx │ │ ├── app.tsx │ │ ├── auth.$.tsx │ │ ├── auth.login │ │ │ ├── error.server.tsx │ │ │ └── route.tsx │ │ ├── _index │ │ │ ├── route.tsx │ │ │ └── styles.module.css │ │ ├── webhooks.app.scopes_update.tsx │ │ └── webhooks.app.uninstalled.tsx │ ├── routes.ts │ └── shopify.server.ts ├── CHANGELOG.md ├── Dockerfile ├── env.d.ts ├── extensions │ └── test-extension-for-test-app │ ├── assets │ │ ├── hello.js │ │ └── thumbs-up.png │ ├── blocks │ │ └── star_rating.liquid │ ├── locales │ │ └── en.default.json │ ├── shopify.extension.toml │ └── snippets │ └── stars.liquid ├── package.json ├── pnpm-lock.yaml ├── pnpm-workspace.yaml ├── prisma │ ├── dev.sqlite │ ├── migrations │ │ └── 20240530213853_create_session_table │ │ └── migration.sql │ └── schema.prisma ├── public │ └── favicon.ico ├── README.md ├── shopify.app.toml ├── shopify.web.toml ├── tsconfig.json └── vite.config.ts 15 directories, 37 files
