Nuxt.jsでIE11対応したときに「strict モードでは、プロパティの複数定義は許可されません。」と怒られる

3957 ワード
Vue.js JavaScript nuxt.js IE JavaScript テキストリンク

NuxtのSSGでWebページを作る仕事をしており、
その際IE11対応をする必要がありました。

既にChromeやEdgeなど他のブラウザではちゃんと動いている状態だったのですが
IEでだけ表示が崩れていました。
（まぁよくあることですね）

IEのコンソールを見てみると以下のような状態でした。

strict モードでは、プロパティの複数定義は許可されません。とのこと。。。

今回は私のケースではこう解決しましたよという話をします。
すべてのケースでこれが正しいってわけではないと思います。

結論

  • エラーメッセージの通り、同じプロパティを二回設定している可能性があるので、スタックトレースに出力されているコンポーネントをよく見直しましょう。
  • strictモードを解除するは最終手段にしよう。
  • なぜ他のブラウザでは怒られないのか・・・

解決するまでにしたこと

まずエラーメッセージをググってみる

とりあえずstrictモードをやめると解決したよ！みたいな情報が多かったので
その方向で色々と検証しました。

私の試したプロジェクトではいずれも上手くいかず、strict modeが解除されなかったです。
（babelやTSへの理解が浅いことも原因かもしれません）

まぁそもそもあまり根本的な解決法ではなさそうなので断念することに。

スタックトレースを読んでみる

スタックトレースを見てみると概ね以下のような状態でした。
※一部ファイル名等変更してます。

stack: "SyntaxError: strict モードでは、プロパティの複数定義は許可されません。
   at ./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/@nuxt/components/dist/loader.js?!./node_modules/vue-loader/lib/index.js?!./components/organisms/layouts/Modal.vue?vue&type=template&id=da284a90&scoped=true& (http://localhost:3000/_nuxt/pages/index.js:1016:1)
   at __webpack_require__ (http://localhost:3000/_nuxt/runtime.js:854:12)
   at fn (http://localhost:3000/_nuxt/runtime.js:151:13)
   at eval code (eval code:2:22)
   at ./components/organisms/layouts/Modal.vue?vue&type=template&id=da284a90&scoped=true& (http://localhost:3000/_nuxt/pages/index.js:536:1)
   at __webpack_require__ (http://localhost:3000/_nuxt/runtime.js:854:12)
   at fn (http://localhost:3000/_nuxt/runtime.js:151:13)
   at eval code (eval code:2:22)
   at ./components/organisms/layouts/Modal.vue (http://localhost:3000/_nuxt/pages/index.js:500:1)
   at __webpack_require__ (http://localhost:3000",
      Symbol()_e.kk24c8l2mhc: undefined

下から3行目辺りにこちらで用意したVueコンポーネントがでていたので
そちらを探ることになりました。

色々調べていると以下のページにたどり着きました。
英語のエラーメッセージで検索（Multiple definitions of a property not allowed in strict mode）
https://github.com/BabylonJS/Babylon.js/issues/4257

同じpropsを二回設定している。。。

もう一回見直してみると私のところでは以下のようにやらかしてました。
widthを二回設定しています。

components/organisms/layouts/Modal.vue
<div class="container" :style="{ width, width, maxWidth, maxHeight }">
  <slot></slot>
</div>

結局凡ミスでした。

参考

https://alliance7.blogspot.com/2019/07/ie11strict.html
https://github.com/BabylonJS/Babylon.js/issues/4257