Using external files in theme app extension

Shopify Apps

Topic summary

Feasibility of using TypeScript and npm libraries within a Shopify theme app extension to render a custom web component on the product page.

Key questions:

  • Can .ts (or files beyond .js/.css) be included in the extension’s assets and imported?
  • Can external npm libraries installed in the app be referenced by the theme app extension?

Findings/attempts:

  • Including TypeScript directly and using imports did not work. The extension environment behaved as “vanilla,” effectively allowing only plain JS/CSS with no module imports.
  • Referencing npm-installed libraries from the parent app into the theme app extension also failed.
  • Although other developers’ extensions appeared to include more files than the basic framework, this did not translate into working TypeScript or external library imports for the poster.

Outcome/status:

  • No successful method was identified to use TypeScript or external npm dependencies directly in the theme app extension.
  • Workaround: rewrite needed functionality in plain JavaScript (longer, inline code) instead of relying on packages.
  • Discussion remains open without an official solution presented.
Summarized with AI on January 7. AI used: gpt-5.
1

Hey! So I am attempting to create a custom web component in the product page via theme app extension on a custom app that I am planning on allowing Shopify owners to download. I have previous code for the web component that is written in TS (Type Script) and want to reuse it in my theme app extension. So my question is, am I able to include .ts code or any code besides .js and .css into the assets folder or anywhere else in the theme app extension file to allow me to import the web component onto their product page?

For reference this is the structure of the file https://shopify.dev/apps/online-store/theme-app-extensions/extensions-framework

I have seen other theme app extension files from other developers and saw that they included more than what was given in the original framework.

A separate question but also relevant. The typescript file needs an external library that’s downloaded via npm. I know you can install libraries onto a custom app via npm but, would I be able to somehow reference libraries from my app to the theme app extension as a potential solution for my problem above? I have already tried this but have had no luck.

Thanks!

3 Likes
2

Have you ever been able to get this up and running?

I am very much interested in exactly what you are describing: Theme app extension in Typescript, ideally with the possibility to use external libraries.

3

I was not. It seems like the theme app extensions run purely on their vanilla language state. So, no imports are possible, I just got around this issue with writing longer code that the package does for me.