概要

Android OS 4.4系でVueのコンポーネントを読み込んだ際にUncaught SyntaxError: Duplicate data property in object literal not allowed in strict modeが出る問題です

Uncaught SyntaxError: Duplicate data property in object literal not allowed in strict modeとは

エラー内容の通り、オブジェクトのキーが重複していると起こるエラーです

const obj ={
  a: "hoge",
  b: "fuga",
  a: "piyo", // <-重複しているよ!
}

Android 4.4系でVueのコンポーネントを読み込んだ際に発生するパターン

例えば以下のコンポーネントを読み込むと起こります

<template>
  <div>
    <span>ただのチェックボックス</span>
    <input
      type="checkbox"
      v-model="checked"
      :checked="false"
    >
    </input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checked: true,
    }
  },
}
</script>

オブジェクトのキーが重複していると言われるとexport defaultしているオブジェクトにどうしても目が行きがちなのですが、コントローラーの実装はシンプルでそのような箇所はありません

エラーが起こってるのはtemplate側ということになりますが、こちらもそのまま見ても原因がわからないのでwebpackでビルドした後のバンドルファイルを覗いてみます

__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"render\", function() { return render; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"staticRenderFns\", function() { return staticRenderFns; });
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c(\"div\", [
    _c(\"span\", [_vm._v(\"ただのチェックボックス\")]),
    _vm._v(\" \"),
    _c(\"input\", {
      directives: [
        {
          name: \"model\",
          rawName: \"v-model\",
          value: _vm.checked,
          expression: \"checked\"
        }
      ],
      attrs: { type: \"checkbox\" },
      domProps: {
        checked: false,                      // 👈ココ
        checked: Array.isArray(_vm.checked)  // 👈ココ
          ? _vm._i(_vm.checked, null) > -1
          : _vm.checked
      },
      on: {
        change: function($event) {
          var $$a = _vm.checked,
            $$el = $event.target,
            $$c = $$el.checked ? true : false
          if (Array.isArray($$a)) {
            var $$v = null,
              $$i = _vm._i($$a, $$v)
            if ($$el.checked) {
              $$i < 0 && (_vm.checked = $$a.concat([$$v]))
            } else {
              $$i > -1 &&
                (_vm.checked = $$a.slice(0, $$i).concat($$a.slice($$i + 1)))
            }
          } else {
            _vm.checked = $$c
          }
        }
      }
    })
  ])
}
var staticRenderFns = []
render._withStripped = true

//# sourceURL=webpack:///./src/example/views/App.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options"

domPropsのオブジェクトにcheckedが重複しているのがわかります

今回の例ではv-modelと:checkedどちらかを抜いてしまえばdomPropsの重複キーが無くなりエラーを解消できます