0
468
VistasRecibo un componente Error al montar: plantilla o función de representación no definida en IE11 pero no en otros navegadores. ¿Cómo localizar el punto de falla?
Tenemos una aplicación Vue/Nuxt establecida ejecutándose en producción, y para nuestro último sprint implementé un montón de cambios bastante comunes que normalmente haríamos para una nueva función.
Los cambios no incluyeron ningún cambio estructural en el componente de la página principal o en los componentes de diseño subyacentes, sino que la mayor parte de los cambios se realizaron en un componente secundario existente.
La página funciona perfectamente bien en Chrome, Edge, Firefox, etc... historia habitual... pero no en IE11.
Recibo inesperadamente el siguiente error al cargar la página;
[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> <Nuxt> <VApp> <Layouts/default.vue> at layouts/default.vue <Root>El mismo componente de página funciona bien en las sucursales de otros colegas. Entonces, obviamente, es 'uno' de mis cambios, pero simplemente no puedo identificar ningún componente relacionado. Especialmente dado que funciona en otros navegadores.
Por ejemplo, ¿podría ocurrir esto debido a que no se está cargando un polirrelleno que se necesita inesperadamente? No he usado ninguna función de ES5/ES6 que no hayamos usado en otros lugares, o en esta página ya, por lo que parece extraño que eso lo provoque repentinamente.
Pasos que he intentado depurar;
- Comente el componente secundario en el que se encontraban la mayor parte de mis cambios, sin cambios
- Reemplace TODO en el bloque de plantilla con `¡Hola mundo! - ningún cambio
- Asegúrese de que exista una importación para CADA componente dentro del componente de la página que falla (para asegurarse de que la importación automática configurada de Nuxt no se esté interrumpiendo en IE; ha estado funcionando bien durante meses)
- Eliminó el servidor y reconstruyó la aplicación varias veces solo para asegurarse de que la recarga en caliente no sea un problema
- Vuelva a almacenar en caché la página en IE regularmente en caso de que esté siendo un bleeeep y recuerde algo que no debería
Puede confirmar;
- NO se han realizado cambios/actualizaciones en los paquetes
- NO se han realizado cambios en la configuración de la aplicación
- NO hay cambios en la ubicación de la carpeta, por lo tanto, en la ruta, el componente de la página reside en
- NO se han realizado cambios en los archivos de diseño subyacentes (a pesar de que el mensaje de error sugiere que está el problema)
Como saben los desarrolladores de Vue, a menudo verá este error genérico cuando arruinó un componente en algún lugar profundo de su aplicación que no tiene ninguna relación con el componente de diseño, y una vez solucionado, este error genérico desaparece. Por lo tanto, comenté mi componente secundario para ver si eso estaba causando el problema.
Estoy molesto por lo que podría haber cambiado para romper solo esta página en IE11.
Además de ser IE11, por supuesto. Ugggh. Lo sé. Pero no podemos... todavía :(
Cualquier sugerencia/ayuda sobre qué más podría probar/depurar sería muy apreciada.
1 Respuestas
Responde la pregunta0
Me di cuenta de lo que estaba causando esto, pero es un poco raro.
Claramente, este era un problema dentro de una plantilla, sin embargo, nada dentro del alcance de las plantillas involucradas contenía código que no se usaba en otros lugares y que todavía funcionaba bien en IE11.
La cadena de plantilla;
Default.vue (layout) > pages > {program} > {form} > _id.vue (this was the 'anonymous' template above) > ServiceClaim.vue (shared component, changes were made here)El proceso;
- Referencia de ServiceClaim comentada de la plantilla _id.vue - _id no se representó
- Importación de ServiceClaim comentada también - _id representado
- ServiceClaim sin comentarios: _id no se representó (definitivamente aquí, genial)
En el componente ServiceClaim;
- Comentó todo el marcado de plantilla - _id representado
- Comentó todos menos la lista de reclamos anterior - _id renderizado
- Comentó solo el marcado del formulario - _id renderizado
- El problema está dentro del formulario...
- Campos comentados rellenados con la función .include ES6 - _id no se representó
- Así que es un control con elementos de lista...
- Campos comentados que recuperan elementos de la lista - _id representado
- Confirmado...
- Comente controles uno por uno hasta que descubrí que era un control de grupo de radio
-
- Almacenamiento refactorizado y recuperación de elementos de lista: sin cambios
- Se agregó el atributo de ID de campo para mantener la coherencia: sin cambios
- Cambie los atributos field-id y field-name para usar valores estáticos, es decir, no usar la directiva - _id representado
- ¡Eureka!
- Cambie los atributos field-id y field-name a valores estáticos pero usando la directiva nuevamente - _id representado
- Curioso
-
- Cambie los atributos field-id y field-name a valores dinámicos usando la directiva - _id representado
- ¿eh? Pero... bueno bien
-
- _id ahora se representa en IE11 pero efectivamente con el mismo código que antes. Hmmmmm.
- NB: desde entonces cambié: fila = "verdadero" a solo fila (solía establecerse dinámicamente, por lo tanto, la directiva)
Conclusión;
Para ser justos, no estoy del todo seguro, tal vez alguien más pueda explicarlo, pero en última instancia, se trata de un problema de compilación que no se pudo rectificar hasta que el código infractor se modificó, restauró y se reconstruyó la solución.