Dynamic input field type renders invalid code in IE11

Version

2.5.17-beta.0

Reproduction link

https://github.com/nirazul/vue-loader-bug-repro

Steps to reproduce

1. npm install
2. npm run build
3. npm run watch
4. Open ./public/index.html
5. Inspect main.bundle.js in dev tools
6. On line 9044 you will find a duplicated key value

What is expected?

A valid output from vue-template-compiler without duplicated value props, or at least a warning that the usage of dynamic input field types is prohibited in certain cases.

What is actually happening?

In IE11 a blank page is rendered

---

I’m using a centralized component for both radio and checkbox input fields as the markup is 90% the same. As we switched from webpack 3 to webpack 4, we had to also upgrade the vue-loader version from 12 to 13 or 14, which introduced this bug. Prior to version 13, vue-template-renderer was not enforcing strict mode on all of its rendered templates. This is now the case, introducing this critical bug.

References: https://vuejs.org/v2/guide/forms.html#Radio-1 https://github.com/vuejs/vue/issues/7048 https://github.com/vuejs/vue/issues/6917

[ollietreend]

I’ve just experienced this exact same ‘white screen’ issue with IE11, whereas no warnings or problems were experienced in modern browsers (Chrome, Firefox, Safari, Edge).

The IE11 JS console showed the following error:

Multiple definitions of a property not allowed in strict mode

I jumped down the rabbit hole and followed a few threads between different issues and PRs here, but struggled to find a clearly documented solution. After some trial and error, I’ve come up with something that works for my needs.

For the benefit of others in the same situation, this is the solution I’ve come up with:

Solution

Originally I’d bound the input type attribute to a variable, which would either be checkbox or radio:

<input :type="type" :value="value" v-model="model" />

Since the issue seems to stem from dynamically binding the type attribute, I changed my template to conditionally render the input using v-if:

<input v-if="type === 'checkbox'" type="checkbox" :value="value" v-model="model" />
<input v-if="type === 'radio'" type="radio" :value="value" v-model="model" />

By hardcoding the type attribute for each of the possible types, and showing them conditionally depending on the value of type, I was able to workaround this particular bug. IE11 seems to be fine with this.

[rs3d]

I’ve also spend now some time debugging this on a async module, which complicated the bug search a lot. It would be great to have this fixed ❤️