1. yosida001

    Posted

    yosida001
Changes in title
+[Vue 3]app.config.globalPropertiesがundefinedと言われてしまった人の忘備録
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,103 @@
+## はじめに
+Vue2から3にアップデートするにあたり、vue-xxx シリーズが片っ端から陳腐化してしまったため、
+app.config.globalPropertiesにプログラムを置くことにしました。
+ところが、そこにちいさな躓きポイントが結構あったため忘備録として起きたことと解決までを記述してます。
+
+## 環境
+Vue ^3.0.5
+
+↓今回入れたいアプリ↓
+luxon ^1.26.0
+
+## 問題発生
+
+``` javascript:app.js
+const {DateTime, Interval} = require("luxon");
+import { createApp, h } from 'vue';
+const el = document.getElementById('app');
+let app = createApp({}).mount(el);
+
+//Uncaught TypeError: Cannot read property 'globalProperties' of undefined
+app.config.globalProperties.$luxonDateTime = DateTime;
+
+```
+
+`app.config`に`globalProperties`が無いよと言われている。
+
+## ますは仕様を確認
+この解決法を見つけたのはStackoverflowの以下の記述だったので、真実ではない可能性もある。
+https://stackoverflow.com/questions/65346785/vue-3-app-config-is-undefined-how-to-bypass-this-error
+
+というわけで、本家Vue3さんに仕様を確認しに行く
+https://v3.vuejs.org/api/application-config.html#globalproperties
+
+どうやら**間違いなく存在する**ようだ。
+
+## とりあえずconfigの中身を見てみる
+上記ページの一番最初に`console.log(app.config)`で確認してみろと書いてあったのでやってみた。
+
+```javascript:app.js
+//...
+
+let app = createApp({}).mount(el);
+
+console.log(app.config); //undefined
+
+app.config.globalProperties.$luxonDateTime = DateTime;
+```
+
+**なんと出力は`undefined`だった。**
+
+## なんか怪しいぞ?
+仮にバージョンを間違えていた等の根本的な問題があったとしても、さすがに`app.config`が空というのはおかしい。
+そこで初めて、 `createApp({}).mount(el)`←これの戻り値がおかしいのではないか?と気が付く。
+
+以下のように書き換えてみた。
+
+```javascript:app.js
+//...
+
+let app = createApp({});
+app.mount(el);
+
+console.log(app.config); //Object
+```
+
+出てきた!
+
+## 解決
+というわけで、今回の原因は、
+**app本体が入っていると思っていた変数に`mount()`の戻り値が入ってしまっており、期待した値ではなかった**
+でした。
+ちゃんと関数の戻り値は確認しようね!
+
+
+※componentの読み込み系はすべて省略しています。自分で増やしてください。
+
+```javascript:app.js
+//..
+
+let app = createApp({});
+app.mount(el);
+
+app.config.globalProperties.$luxonDateTime = DateTime;
+app.config.globalProperties.$luxonInterval = Interval;
+```
+
+```vue:index.vue
+//...
+<script>
+export default {
+ name: "Index",
+ data() {
+ return {
+ now: this.$luxonDateTime.now()
+ }
+ }
+}
+</script>
+
+//..
+```
+
+無事動きました!!