Vue 3 warning "tags with side effects" is breaking Production

user_307438 0
Viewed 10190

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?

vuejs3 vue.js javascript
4 Answers

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...

user_3074380

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>
user_80397440

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>
user_161613240

In my case, there was a div tag that wasn't closed. so I closed it and that solved the problem.

user_91572390
Related