[Vuejs]-I'm getting a Failed to mount component: template or render function not defined in IE11 but not other browsers. How to locate point of failure?

by

0👍

✅

I figured out what was causing this, but it is a bit weird.

So clearly this was an issue inside a template, however nothing inside the scope of templates involved contained code that wasn’t use elsewhere that was still working fine in IE11.

The template chain;

Default.vue (layout)
   > pages
      > {program}
         > {form}
            > _id.vue (this was the 'anonymous' template above)
               > ServiceClaim.vue (shared component, changes were made here)

The process;

  • Commented ServiceClaim reference from _id.vue template – _id didn’t render
  • Commented ServiceClaim import as well – _id rendered
  • Uncommented ServiceClaim – _id didn’t render (definitely here, great)

In ServiceClaim component;

  • Commented all template markup – _id rendered
  • Commented all but previous claim list – _id rendered
  • Commented just the form markup – _id rendered
    • Issue is within the form…
  • Commented fields populated using .include ES6 function – _id didn’t render
    • So it’s a control with list items…
  • Commented fields retrieving list items – _id rendered
    • Confirmed…
  • Commented controls one by one until I found it was a radio group control
    • Original control markup
  • Refactored storage and retrieval of list items – no change
  • Added field-id attribute for consistency – no change
  • Change field-id and field-name attributes to use static values i.e. not using directive – _id rendered
    • Eureka!
  • Change field-id and field-name attributes to static values but using directive again – _id rendered
    • Curious
    • Directive causing issue with static value
  • Change field-id and field-name attributes back to dynamic values using directive – _id rendered
    • Eh? But… ok fine
    • Final markup effectively unchanged
  • _id now renders in IE11 but effectively with the same code as before. Hmmmmm.
    • NB: I have since changed :row="true" to just row (used to be dynamically set hence the directive)

Conclusion;

To be fair I’m not entirely sure – perhaps someone else can explain but – this is ultimately a build issue that could not be rectified until the offending code was changed, restored, and the solution rebuilt.

Leave a comment