Can you use react for theme extensions?
Planning on using the vercel AI SDK and use their AI UI which uses react. So hoping I can create the chatbot UI in react and have it as a theme extension so I can use it for multiple stores.
8 Replies
Pretty certain react cannot be used, plus there is a size limit for theme extensions, so neds to be simple javascript and liquid
I see, I am seeing in the shopify forums it might be possible by using vite - so having your react app outside of the extensions folder then use vite to add the js and css and have a target in the blocks...
Not 100% sure about it (I am new to react and extensions)
Re: Use React in app block theme extension
We have a few images stored in an assets folder in the src of our React app that we reference. These are small things like icons that are compiled with the React app. The rest we have in blob storage and reference those urls. There would be some serious size limitations on any files you'd be bund...
I think it will be the size limit that might be the biggest issue... although someone said 'That asset size limit is part of Theme Check in the CLI. You can disable it.'
I'm doing just that. Check out preact.
ahh awesom, I will check it out!
at the moment I have created the react app outside of the extensions folder and have ".chatbot-root" as the target , vite adds the js and css, the app block uses these.
I then "shopify app deploy" and it goes through, does give a warning about the size but does deploy!
But when I am in the online theme editor we can't add the extensions - we only see the default one 'start rating' so unsure where to go from here...
is your schema correct with target body?
mine is something like:
Yeah I believe so, got the target set as the "body"
{% comment %}
@name: Chatbot
@description: A chatbot interface for customer support
{% endcomment %}
<div id="chatbot-root" class="fixed bottom-4 right-4 z-50"></div>
{% # theme-check-disable AssetSizeJavaScript %}
<script defer src="{{ 'chatbot.js' | asset_url }}"></script>
{% # theme-check-enable AssetSizeJavaScript %}
{{ 'chatbot.css' | asset_url | stylesheet_tag }}
{% schema %}
{
"name": "Chatbot",
"target": "body",
"settings": []
}
{% endschema %}
Ahh so I've run "shopify app dev" and opened the theme editor there and I can see it...
So not sure why our deploy didn't work...
I was just using the live theme in the editor to add it...