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...
it's a bit late but the same thing happened to me and I think I have the solution. At least in my case.
You have to embed the script just before the closing body tag in your index.html. The problem is (I imagine) that you have it inside the main div.
It should look like this:
<body>
<div id="app">
</div>
<script src="./main.js"></script>
</body>
In my case, there was a div tag that wasn't closed. so I closed it and that solved the problem.