Vite server websocket connection fails in theme editor
We have a theme that includes some embedded Vue components. When working on the theme locally with Shopify CLI, we use a Vite server to run the Vue components in dev mode. And of course in production the components run off a compiled script. Our theme.liquid file conditionally loads the dev resources based on theme.role:
{% if theme.role == 'development' %}
<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/src/main.ts"></script>
{% endif %}This works great locally, but causes problems in the theme editor. I'm not sure what's going on behind the scenes (don't know enough about Vite and websockets), but when I run the theme locally and open it in the theme editor everything works great for maybe 30 seconds. Then the websocket connection to the Vite server fails and Vite starts pinging every second to see when the server is back. The server never comes back and eventually I start getting Shopify's 430 errors.
I'm not sure what to do. Ideally the websocket connection would keep working of course. But I'd also be fine with simply not running the Vite server in the theme editor. We really only need the Vue components to run in dev mode locally. But I can't find a way to detect when the theme is running in the theme editor. Any ideas?
