Has anyone experienced this issue where a UI extension works in a brand-new app but fails to preview in an existing one, even with identical code?

Extensions
1

Issue with Shopify App Extension Preview in Existing App

Hi everyone,

I’m running into a strange issue while working on a Shopify app and wanted to share it here in case anyone else has encountered something similar or has a workaround.
Context:

I’m building a Customer Account UI Extension using the Shopify App CLI.

When I create a new app from scratch, generate the extension, and preview it using the Shopify App Developer (shopify app dev) tool, everything works as expected. The preview renders correctly and the extension functions without errors.

Problem:

However, when I try to do the same thing within my already existing (previously built) Shopify app, I run into issues:

The extension is generated successfully.

After resolving some initial dependency issues (which I fixed), I was able to start the local development server.

But when I open the preview, nothing is rendered, and the browser console throws the following errors:

“TypeError”

“undefined”

Even though no changes have been made to the extension code, this issue persists only in the existing app, not when I generate a fresh one.

To add to the confusion, even if I create a brand new extension inside the old app, I still encounter the same errors pointing to the extension’s source file.

exact words of issues “Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘S’) customer-account-ui-extension.js:158”

2

Hello there, here are some troubleshooting steps I would suggest:

  • Delete any build artifacts (dist, build, .shopify, node_modules, etc.) and reinstall dependencies.
  • Ensure your existing app’s dependencies and their versions match those in a fresh app where the extension works.
  • Check that your extension is correctly registered in your app’s configuration files (such as shopify.app.toml and shopify.extension.toml). Also compare your toml files between each app.
  • Make sure the extension’s type and handle are unique and not conflicting with previous extensions.

Also if you need further help could you:

  • share your Shopify CLI version;
  • share the entire error callstack;
  • Do you see the error in your browser console? maybe try adding some console.log to see where it crashes.
1 Like
3

  • Ensure your existing app’s dependencies and their versions match those in a fresh app where the extension works.
    at your second point can you explain me in more detail like which tings i have to compare =>exactly from package.json

  • Check that your extension is correctly registered in your app’s configuration files (such as shopify.app.toml and shopify.extension.toml). Also compare your toml files between each app.
    => in this point can you share exactly which things i have to masure

as you required things is below
$ node -v
v20.19.4
$ pnpm -v
10.17.1
$ shopify version
3.84.2

image
image1874×875 142 KB

Yes i saw an error at the browser console at the preview of the extension (customer account ui extention for order status )

4

Hello,

Can you share a few things to help us investigate:

  • Extension version specified in you extension.shopify.toml file
  • A minimal extension source that reproduces the error?

The error you mentioned suggests the error might be on line 158 of your extension script:

TypeError: Cannot read properties of undefined (reading ‘S’) customer-account-ui-extension.js:158