I've recently upgraded from Vue 2 to Vue 3, and there are a few parts of my app that in development mode give the warning:
[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
In Vue 2, these warnings were just hidden in production. However, in Vue 3, pages with these warnings completely break and the screen goes blank. They run fine in development.
It's not practical for me to remove all of these <script> tags because they are inserted dynamically by my CMS (Shopify).
Is there any way for me to catch these errors in production so they don't take down my site?
So far, this is the best solution I've found.
Replace:
<script>
// JS CODE HERE
</script>
With:
<component is="script">
// JS Here
</component>
However, I'd prefer a global setting so that I don't have to do this for every plugin. Right now my app feels very brittle in case anyone on my team adds another CMS plugin.
I don't want the app just breaking as soon as it comes across a <script> tag...