特定のAndroid OSバージョンでVueのコンポーネントを読み込んだ際に`Uncaught SyntaxError: Duplicate data property`が出る【Vue】
概要
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の重複キーが無くなりエラーを解消できます