質問編集履歴
3
ささいな表記間違いを修正しました
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -72,7 +72,11 @@
|
|
|
72
72
|
|
|
73
73
|
そしてこのimport行が無い時に発生するエラー時にブラウザのconsoleに出てくるのは、
|
|
74
74
|
|
|
75
|
+
```
|
|
76
|
+
|
|
75
|
-
|
|
77
|
+
Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
|
|
78
|
+
|
|
79
|
+
```
|
|
76
80
|
|
|
77
81
|
というメッセージで、初期化がうまくいっていない旨だと理解しています。画面は真っ白でゆっくりローディング中の表示になります。
|
|
78
82
|
|
|
@@ -89,6 +93,8 @@
|
|
|
89
93
|
---
|
|
90
94
|
|
|
91
95
|
・なぜstore/index.js内にfirebaseのimportの表記をしないとエラーが発生するのか
|
|
96
|
+
|
|
97
|
+
|
|
92
98
|
|
|
93
99
|
---
|
|
94
100
|
|
2
V9への移行は完了したが、不明点が残っているため、質問内容を変更しました
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Nuxt2
|
|
1
|
+
Nuxt2とFirebaseでstore/index.jsにfirebaseをimportする理由について
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
追記：下記の質問ですが、状況が変わってしまいました。検証したところ、
|
|
1
|
+
追記：下記の質問ですが、状況が変わってしまいました。当初はFirebaseをV9方式に移行させる過程でトラブルが発生していると思い込んでおりましたが、検証したところ、無事にV9への移行は完了したようです。それで質問内容を変更させていただき、タイトルも変更しました。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
@@ -12,7 +12,9 @@
|
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
|
|
15
|
-
そして現在、firebase/compatが残っている最後の１箇所がFirebase初期化
|
|
15
|
+
~~そして現在、firebase/compatが残っている最後の１箇所がFirebase初期化とauth周りです。firebase/compatを全て取り除きv9に完全対応させたいと思ったのですが、ここからうまく行きません。~~
|
|
16
|
+
|
|
17
|
+
V9完全移行は成功しました。ですがまだ疑問があります。
|
|
16
18
|
|
|
17
19
|
|
|
18
20
|
|
|
@@ -22,7 +24,7 @@
|
|
|
22
24
|
|
|
23
25
|
```
|
|
24
26
|
|
|
25
|
-
import
|
|
27
|
+
import { getApp, getApps, initializeApp } from 'firebase/app'
|
|
26
28
|
|
|
27
29
|
const firebaseConfig = {
|
|
28
30
|
|
|
@@ -42,13 +44,13 @@
|
|
|
42
44
|
|
|
43
45
|
}
|
|
44
46
|
|
|
45
|
-
|
|
47
|
+
const firebase = !getApps().length ? initializeApp(firebaseConfig) : getApp()
|
|
46
48
|
|
|
47
|
-
|
|
49
|
+
console.log('V9でのFIREBASE初期化')
|
|
48
|
-
|
|
49
|
-
}
|
|
50
50
|
|
|
51
51
|
export default firebase
|
|
52
|
+
|
|
53
|
+
|
|
52
54
|
|
|
53
55
|
```
|
|
54
56
|
|
|
@@ -76,7 +78,9 @@
|
|
|
76
78
|
|
|
77
79
|
|
|
78
80
|
|
|
79
|
-
なぜ```import firebase from '~/plugins/firebase'```の有無でエラーが発生するのか
|
|
81
|
+
なぜ```import firebase from '~/plugins/firebase'```の有無でエラーが発生するのかが今も分かりません。
|
|
82
|
+
|
|
83
|
+
当初はauth周りに問題があるかと思い、それに関連してauthも含めてV9へ移行する方法を質問していましたが、それが解決したことで質問内容が下記に変更になりました。
|
|
80
84
|
|
|
81
85
|
|
|
82
86
|
|
|
@@ -84,19 +88,13 @@
|
|
|
84
88
|
|
|
85
89
|
---
|
|
86
90
|
|
|
87
|
-
・なぜstore/index.js内のimportの
|
|
91
|
+
・なぜstore/index.js内にfirebaseのimportの表記をしないとエラーが発生するのか
|
|
88
|
-
|
|
89
|
-
~~・store/index.js内にautheをインポートすることの意義~~
|
|
90
|
-
|
|
91
|
-
・v9方式にするための直接的な回答
|
|
92
|
-
|
|
93
|
-
|
|
94
92
|
|
|
95
93
|
---
|
|
96
94
|
|
|
97
|
-
質問したいのは上記
|
|
95
|
+
質問したいのは上記になります。
|
|
98
96
|
|
|
99
|
-
|
|
97
|
+
教えていただけたら大変ありがたいです。
|
|
100
98
|
|
|
101
99
|
あるいは関連する参考情報だけでも助かります。
|
|
102
100
|
|
1
追加の検証により関係する要素が絞り込まれ、問題点は主にfirebase初期化になったと思われる
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
Nuxt2でFirebaseの
|
|
1
|
+
Nuxt2でFirebaseの初期化をv9対応に変更する方法
|
test
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
追記：下記の質問ですが、状況が変わってしまいました。検証したところ、今回の件にauthは関係ないような気がしてきました。現状でログインとログアウトは正常に動作しています。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
1
7
|
私がNuxtを使用してごく小規模な開発を始めた頃、あまり理解していない中でネット記事を見ながらauth周りを実装していったので、理解が浅いままその後の開発が進んできている状態でした。
|
|
2
8
|
|
|
3
9
|
その中で昨年末に始まったV9対応の必要性を目にして、早速自分のプロジェクトもV9対応に着手し、まずは関連するすべての箇所にfirebase/compatを導入し、その後、コードをv9方式に書き換えました。
|
|
@@ -6,7 +12,123 @@
|
|
|
6
12
|
|
|
7
13
|
|
|
8
14
|
|
|
9
|
-
そして現在、firebase/compatが残っているのがFirebase初期化とauth周りです。firebase/compatを全て取り除きv9に完全対応させたいと思ったのですが、ここからうまく行きません。
|
|
15
|
+
そして現在、firebase/compatが残っている最後の１箇所がFirebase初期化~~とauth周り~~です。firebase/compatを全て取り除きv9に完全対応させたいと思ったのですが、ここからうまく行きません。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
さて、私のコードなのですが、plugins/firebase.jsにfirebase初期化コードを書いています。
|
|
22
|
+
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
import firebase from 'firebase/compat'
|
|
26
|
+
|
|
27
|
+
const firebaseConfig = {
|
|
28
|
+
|
|
29
|
+
apiKey: 'AI****************',
|
|
30
|
+
|
|
31
|
+
authDomain: 'h************5.firebaseapp.com',
|
|
32
|
+
|
|
33
|
+
databaseURL: 'https://h************5.firebaseio.com',
|
|
34
|
+
|
|
35
|
+
projectId: 'h************5',
|
|
36
|
+
|
|
37
|
+
storageBucket: 'h************5.appspot.com',
|
|
38
|
+
|
|
39
|
+
messagingSenderId: '246************7',
|
|
40
|
+
|
|
41
|
+
appId: '1:246************7:web:37c************3ee',
|
|
42
|
+
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
if (!firebase.apps.length) {
|
|
46
|
+
|
|
47
|
+
firebase.initializeApp(firebaseConfig)
|
|
48
|
+
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
export default firebase
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
そしてstore/index.jsに下記のコードが書かれています。
|
|
56
|
+
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
import firebase from '~/plugins/firebase'
|
|
60
|
+
|
|
61
|
+
const aa = firebase
|
|
62
|
+
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
なおstore内でaaは実際には使用していません。でもこのconst行を消すと、lint機能のせいでファイル保存時に```import firebase from '~/plugins/firebase'```が自動的に削除されて保存されてしまい、結果エラーが発生します。
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
それでこの行を残すためにわざわざ必要のないaaを定義して、firebaseを使っているように見せかけています。
|
|
70
|
+
|
|
71
|
+
そしてこのimport行が無い時に発生するエラー時にブラウザのconsoleに出てくるのは、
|
|
72
|
+
|
|
73
|
+
```Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).```
|
|
74
|
+
|
|
75
|
+
というメッセージで、初期化がうまくいっていない旨だと理解しています。画面は真っ白でゆっくりローディング中の表示になります。
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
なぜ```import firebase from '~/plugins/firebase'```の有無でエラーが発生するのかをまず理解しないと、V9方式への変更ができないように感じておりまして、今回の質問をさせていただこうと思いました。
|
|
80
|
+
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
質問したいこと
|
|
84
|
+
|
|
85
|
+
---
|
|
86
|
+
|
|
87
|
+
・なぜstore/index.js内のimportの有無でエラーが発生するのか
|
|
88
|
+
|
|
89
|
+
~~・store/index.js内にautheをインポートすることの意義~~
|
|
90
|
+
|
|
91
|
+
・v9方式にするための直接的な回答
|
|
92
|
+
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
質問したいのは上記２点になります。
|
|
98
|
+
|
|
99
|
+
どれか1つでも教えていただけたら大変ありがたいです。
|
|
100
|
+
|
|
101
|
+
あるいは関連する参考情報だけでも助かります。
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
それではどうぞよろしくお願いいたします。
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
環境
|
|
110
|
+
|
|
111
|
+
"nuxt": "^2.15.8",
|
|
112
|
+
|
|
113
|
+
"vuetify": "^2.5.5",
|
|
114
|
+
|
|
115
|
+
"firebase": "^9.6.1",
|
|
116
|
+
|
|
117
|
+
"firebase-tools": "^9.23.0",
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
Windows10上のWSL2のUbuntu20.04のDocker上のnode:16.13.0-alpineで実行
|
|
122
|
+
|
|
123
|
+
ホスティングはFirebase
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
追記：状況の変更により当初掲載していた下記の情報は不要になったかもしれません。
|
|
130
|
+
|
|
131
|
+
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
|
|
10
132
|
|
|
11
133
|
|
|
12
134
|
|
|
@@ -58,108 +180,6 @@
|
|
|
58
180
|
|
|
59
181
|
```
|
|
60
182
|
|
|
183
|
+
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
|
|
61
184
|
|
|
62
|
-
|
|
63
|
-
さて、私のコードなのですが、plugins/firebase.jsにfirebase初期化コードを書いています。
|
|
64
|
-
|
|
65
|
-
```
|
|
66
|
-
|
|
67
|
-
import firebase from 'firebase/compat'
|
|
68
|
-
|
|
69
|
-
const firebaseConfig = {
|
|
70
|
-
|
|
71
|
-
apiKey: 'AI****************',
|
|
72
|
-
|
|
73
|
-
authDomain: 'h************5.firebaseapp.com',
|
|
74
|
-
|
|
75
|
-
databaseURL: 'https://h************5.firebaseio.com',
|
|
76
|
-
|
|
77
|
-
projectId: 'h************5',
|
|
78
|
-
|
|
79
|
-
storageBucket: 'h************5.appspot.com',
|
|
80
|
-
|
|
81
|
-
messagingSenderId: '246************7',
|
|
82
|
-
|
|
83
|
-
appId: '1:246************7:web:37c************3ee',
|
|
84
|
-
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
if (!firebase.apps.length) {
|
|
88
|
-
|
|
89
|
-
firebase.initializeApp(firebaseConfig)
|
|
90
|
-
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
export const authe = firebase.auth
|
|
94
|
-
|
|
95
|
-
export default firebase
|
|
96
|
-
|
|
97
|
-
```
|
|
98
|
-
|
|
99
|
-
そしてstore/index.jsに下記のコードが書かれています。
|
|
100
|
-
|
|
101
|
-
```
|
|
102
|
-
|
|
103
|
-
const authe = firebase.auth()
|
|
104
|
-
|
|
105
|
-
```
|
|
106
|
-
|
|
107
|
-
でもstore内でautheは使用していません。
|
|
108
|
-
|
|
109
|
-
にもかかわらず、この依存関係が崩れると画面は真っ白になり、ゆっくりとローディング中の表示が出てしまいます。
|
|
110
|
-
|
|
111
|
-
依存関係を崩すために、片方の変数名をautheではなく、autなどに変更すると途端に真っ白のエラーになります。
|
|
112
|
-
|
|
113
|
-
その時にブラウザのconsoleに出てくるのは、
|
|
114
|
-
|
|
115
|
-
```FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).```
|
|
116
|
-
|
|
117
|
-
|
|
185
|
+
状況の変更により当初掲載していた上記の情報は不要になったかもしれません。
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
なぜimportされただけで使用されていないstore/index.js内のautheの有無でエラーが発生するのかをまず理解しないと、V9方式への変更ができないように感じておりまして、今回の質問をさせていただこうと思いました。
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
質問したいこと
|
|
126
|
-
|
|
127
|
-
---
|
|
128
|
-
|
|
129
|
-
・なぜimportされただけで使用されていないstore/index.js内のautheの有無でエラーが発生するのか
|
|
130
|
-
|
|
131
|
-
・store/index.js内にautheをインポートすることの意義
|
|
132
|
-
|
|
133
|
-
・v9方式にするための直接的な回答
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
---
|
|
138
|
-
|
|
139
|
-
というイメージになります。
|
|
140
|
-
|
|
141
|
-
どれか1つでも教えていただけたら大変ありがたいです。
|
|
142
|
-
|
|
143
|
-
関連する参考情報だけでも助かります。
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
それではどうぞよろしくお願いいたします。
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
環境
|
|
152
|
-
|
|
153
|
-
"nuxt": "^2.15.8",
|
|
154
|
-
|
|
155
|
-
"vuetify": "^2.5.5",
|
|
156
|
-
|
|
157
|
-
"firebase": "^9.6.1",
|
|
158
|
-
|
|
159
|
-
"firebase-tools": "^9.23.0",
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
Windows10上のWSL2のUbuntu20.04のDocker上のnode:16.13.0-alpineで実行
|
|
164
|
-
|
|
165
|
-
ホスティングはFirebase
|