Recientemente me actualicé de Vue 2 a Vue 3, y hay algunas partes de mi aplicación que en el modo de development dan la advertencia:
[Vue warn]: Template compilation error: Tags with side effect (<script> and <style>) are ignored in client component templates.
En Vue 2, estas advertencias simplemente estaban ocultas en production . Sin embargo, en Vue 3, las páginas con estas advertencias se rompen por completo y la pantalla se queda en blanco. Funcionan bien en development .
No me resulta práctico eliminar todas estas etiquetas <script> porque mi CMS (Shopify) las inserta dinámicamente.
¿Hay alguna forma de detectar estos errores en producción para que no eliminen mi sitio?
Hasta ahora, esta es la mejor solución que he encontrado.
Reemplazar:
<script> // JS CODE HERE </script>Con:
<component :is="'script'"> // JS Here </component>Sin embargo, preferiría una configuración global para no tener que hacer esto para cada complemento. En este momento, mi aplicación se siente muy frágil en caso de que alguien de mi equipo agregue otro complemento de CMS.
No quiero que la aplicación se rompa tan pronto como encuentre una etiqueta <script> ...
es un poco tarde pero me paso lo mismo y creo que tengo la solucion. Al menos en mi caso.
Debe incrustar el script justo antes de la etiqueta del cuerpo de cierre en su index.html. El problema es (me imagino) que lo tienes dentro del div principal.
Debe tener un aspecto como este:
<body> <div id="app"> </div> <script src="./main.js"></script> </body>