Menu
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?
854
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...
88
In my case, I move id="app" attribute from <body> to first <div> then solved the problem
before:
<body id="app">
<div>
...
</div>
</body>
after:
<body>
<div id="app">
...
</div>
</body>
answered Sep 07 '25 17:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With