Efficiently find duplicate data property in object literal?

Question

After creating our new system in Vue with babel, I have started testing compatibility towards older devices. Our babel is transpiling the source down to es2015 together with webpack.

I have now tested with browserstack against both Ios & android. Newer OS works on both platforms. However on android phones that use the default browser, I get an error in sentry stating; Duplicate data property in object literal not allowed in strict mode It does not give me any hints on where this might be thus making the debugging process painfully hard.

The only light in the end of the tunnel I can se now is the ios part. Ios devices that run IOS < 9 states an error Attempted to redefine property 'value'. also in sentry

If I am not mistaking, the ios issue is a reworded error of the same issue? As I read over here, I suppose 'value' might be defined twice in a object or element.

This all wraps up to the question, how does one go with finding duplicate data properties?

Answer 1

Can you share some of your code (just the area from a few components?)

One thing to check is inside of data(), ensure you are returning an object. This happened to me when I started out with Vue.

Example:

// component a
data () {
  a: ''
}

// component b 
data () {
  a: '' // ERROR! Duplicate
}

This happens because the data is merged on the main Vue instance. So in this case it should look like:

// component a
data () {
  return {
    a: ''
  }
}

// component b 
data () {
  return {
    a: '' // ok now
  }
}

Hard to make any other guesses without some code.

Answer 2

I had the same issue reported on a old android device, here's what i did :

We had components with both mapActions(["something"]) and a defined method something() { this.$store.dispatch('something') } So i removed the methods declaration.

It still didn't work so I check the build main.xxxx.js on eslint and found some "Attempted to redefine property 'value'" on something like domProps:{value:t.value,value:t.value} Looked up the code and saw that we had components with both v-model and :value and also some checkbox using v-model and :checked. I only kept the v-model and it works.

It also seems like the problems could come from repeated props like stated here : https://www.tutorialfor.com/blog-267252.htm

Answer 3

I managed to find out what line the error occurred on and found out that a plugin that I used with name Vue-numeric had created a duplicate value:

 domProps: {
   value: n.value,
   value: n.amount
 },

I had accidentally locked the plugin on a older version where this problem was present. The issue was fixed by simply updating.

Thank you @xenetics for taking your time on this issue.

Answer 4

Yes, this is a restriction that was only in effect in ES5 strict mode, which these environments you have apparently use. It absolutely makes sense but was nonetheless loosened in ES6 because of computed properties - see What's the purpose of allowing duplicate property names? for details. That's why babel doesn't complain about it when transpiling.

To find these (valid but nonsensical) duplicate property names in object literals in your code base, you can use a linter such as ESLint with a rule against these.