0
476
ViewsI'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?
We have an established Vue/Nuxt app running in production, and for our latest sprint I implemented a bunch of pretty common changes we'd normally make for a new feature.
The changes did not include any structural changes to the primary page component or underlying layout component(s), rather the bulk of the changes were in an existing child component.
The page works perfectly fine in Chrome, Edge, Firefox, etc... usual story... but not in IE11.
I am unexpectedly receiving the following error upon page load;
[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>
The same page component works fine in other colleague's branches. So obviously it's 'one' of my changes but I just cannot identify anything component related. Especially given it works in other browsers.
For example, could this occur because of a unexpectedly needed polyfill that's not being loaded? I haven't used any ES5/ES6 features that we haven't used elsewhere - or on this page already - so it seems odd that would suddenly cause it.
Steps I've tried to debug;
- Comment out the child component the bulk of my changes were in - no change
- Replace EVERYTHING in the template block with `Hello World! - no change
- Ensure an import exists for EVERY component within the failing page component (to ensure the Nuxt configured auto import isn't wigging out in IE - it's been working fine for months)
- Killed the server and rebuilt the app multiple times just to be sure hot reload isn't being a problem
- Hard re-cached the page in IE regularly just in case it's being a bleeeep and remembering something it shouldn't
Can confirm;
- NO changes/updates have been made to packages
- NO changes have been made to app configuration
- NO changes to the folder location - thus route - the page component resides in
- NO changes have been made to the underlying layout files (despite where the error message suggests the issue is)
As Vue developers know, often you'll see this generic error when you've messed up a component somewhere deep within your app that are completely unrelated to the layout component - and once fixed - this generic error goes away. Hence I commented out my child component to see if that was causing the issue.
I am vexed as to what might have changed to only break this page in IE11.
Apart from it being IE11 of course. Ugggh. I know. But we can't... yet :(
Any suggestions/help on what else I could test/debug would be greatly appreciated.
1 answers
Answer question0
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
- 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
- Change field-id and field-name attributes back to dynamic values using directive - _id rendered
- Eh? But... ok fine
- _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.