質問編集履歴

5

2021/12/23 23:46

投稿

rick
rick

スコア18

test CHANGED
@@ -1 +1 @@
1
- firebase/appのインポートでエラーが出ている
1
+ firebase機能のinitializeApp()メソッド呼び出しでエラーが出ている
test CHANGED
@@ -1,6 +1,6 @@
1
1
  JavaScriptの初心者です。
2
2
 
3
- firebaseの機能(firestore)をjavascriptのソースから使用したいのですが、firebase機能のimportでエラーが出ています。エラーが出ている原因と対策を教えていただきたいです。
3
+ firebaseの機能(firestore)をjavascriptのソースから使用したいのですが、firebase機能のinitializeApp()メソッドの呼び出しでエラーが出ています。エラーが出ている原因と対策を教えていただきたいです。
4
4
 
5
5
 
6
6
 
@@ -48,6 +48,8 @@
48
48
 
49
49
  ・firebaseConfig内の各要素は、firebaseのコンソール(https://console.firebase.google.com/)で使用したいFirebaseプロジェクトを選択し、左上に表示される"</>"のネジアイコンをクリック。”SDK の設定と構成”にてラジオボタンで"npm"が選択されている際に表示されるコードをそのままコピーして使用しています。
50
50
 
51
+ ・以下1行目・2行目でコメントアウトしているimport文のコメントアウトを解除すると、import文でエラーが出てしまいます。
52
+
51
53
 
52
54
 
53
55
  public/js/config.js
@@ -184,7 +186,7 @@
184
186
 
185
187
  他に試した事としては、config.jsにてinitializeApp()メソッドを呼ぶことをやめて
186
188
 
187
- index.htmlの<body>タグ内にてfirebaseのjsファイルをインポート、およびinitializeApp()メソッドを呼ぶことをやってみましたが、やはりinitializeApp()メソッドを呼ぶ箇所でエラーが出ました。
189
+ index.htmlの<body>タグ内にてfirebase機能のjsファイルをimportする処理およびinitializeApp()メソッドを呼ぶことをやってみましたが、やはりinitializeApp()メソッドを呼ぶ箇所でエラーが出ました。
188
190
 
189
191
  ```ここに言語を入力
190
192
 

4

修正

2021/12/23 23:45

投稿

rick
rick

スコア18

test CHANGED
File without changes
test CHANGED
@@ -34,10 +34,14 @@
34
34
 
35
35
  →コンソール上に以下のエラーが表示される。
36
36
 
37
+ ```ここに言語を入力
38
+
37
39
  "Uncaught ReferenceError: initializeApp is not defined
38
40
 
39
41
  at config.js:16"
40
42
 
43
+ ```
44
+
41
45
 
42
46
 
43
47
  ・エラー出ている16行目は、以下のソースのinitializeApp()の箇所を指します。

3

修正

2021/12/23 23:11

投稿

rick
rick

スコア18

test CHANGED
File without changes
test CHANGED
@@ -8,8 +8,6 @@
8
8
 
9
9
   ```ここに言語を入力
10
10
 
11
- /
12
-
13
11
   package.json
14
12
 
15
13
   firebase.json
@@ -18,9 +16,9 @@
18
16
 
19
17
    - index.html
20
18
 
21
- 「js」
19
+   - 「js」
22
-
20
+
23
-   - config.js
21
+     - config.js
24
22
 
25
23
  ```
26
24
 
@@ -180,4 +178,54 @@
180
178
 
181
179
 
182
180
 
181
+ 他に試した事としては、config.jsにてinitializeApp()メソッドを呼ぶことをやめて
182
+
183
+ index.htmlの<body>タグ内にてfirebase用のjsファイルをインポート、およびinitializeApp()メソッドを呼ぶことをやってみましたが、やはりinitializeApp()メソッドを呼ぶ箇所でエラーが出ました。
184
+
185
+ ```ここに言語を入力
186
+
187
+ Uncaught ReferenceError: initializeApp is not defined
188
+
189
+ at (インデックス):26
190
+
191
+ ```
192
+
193
+
194
+
195
+ public/index.html
196
+
197
+ ```html
198
+
199
+ <!DOCTYPE html>
200
+
201
+ <html>
202
+
203
+ <body>
204
+
205
+ <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
206
+
207
+ <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js"></script>
208
+
209
+ <script src="/js/config.js"></script>
210
+
211
+
212
+
213
+ <script>
214
+
215
+ // Initialize Firebase
216
+
217
+ const app = initializeApp(firebaseConfig);
218
+
219
+ </script>
220
+
221
+
222
+
223
+ </body>
224
+
225
+ </html>
226
+
227
+ ```
228
+
229
+
230
+
183
231
  有識者の方、すみませんがどうぞよろしくお願いいたします。

2

修正

2021/12/23 23:09

投稿

rick
rick

スコア18

test CHANGED
File without changes
test CHANGED
@@ -8,17 +8,19 @@
8
8
 
9
9
   ```ここに言語を入力
10
10
 
11
+ /
12
+
13
+  package.json
14
+
15
+  firebase.json
16
+
11
17
  「public」
18
+
19
+   - index.html
12
20
 
13
21
  「js」
14
22
 
15
23
    - config.js
16
-
17
-  index.html
18
-
19
-  package.json
20
-
21
-  firebase.json
22
24
 
23
25
  ```
24
26
 
@@ -40,7 +42,11 @@
40
42
 
41
43
 
42
44
 
43
- エラー出ている16行目は、以下のソースのinitializeApp()の箇所を指します。
45
+ エラー出ている16行目は、以下のソースのinitializeApp()の箇所を指します。
46
+
47
+ ・firebaseConfig内の各要素は、firebaseのコンソール(https://console.firebase.google.com/)で使用したいFirebaseプロジェクトを選択し、左上に表示される"</>"のネジアイコンをクリック。”SDK の設定と構成”にてラジオボタンで"npm"が選択されている際に表示されるコードをそのままコピーして使用しています。
48
+
49
+
44
50
 
45
51
  public/js/config.js
46
52
 
@@ -54,21 +60,21 @@
54
60
 
55
61
  const firebaseConfig = {
56
62
 
57
- apiKey: "AIzaSyD9VCA4nXXkoNI0f8NgjEWIYxvZQQJSo0o",
63
+ apiKey: "------",
58
64
 
59
- authDomain: "chat-app-d0cce.firebaseapp.com",
65
+ authDomain: "------",
60
66
 
61
- databaseURL: "https://chat-app-d0cce-default-rtdb.firebaseio.com",
67
+ databaseURL: "------",
62
68
 
63
- projectId: "chat-app-d0cce",
69
+ projectId: "------",
64
70
 
65
- storageBucket: "chat-app-d0cce.appspot.com",
71
+ storageBucket: "------",
66
72
 
67
- messagingSenderId: "1072227133330",
73
+ messagingSenderId: "------",
68
74
 
69
- appId: "1:1072227133330:web:82b2e9b656dca1b44a434b",
75
+ appId: "------",
70
76
 
71
- measurementId: "G-P3XPSH1NEJ"
77
+ measurementId: "------"
72
78
 
73
79
  };
74
80
 
@@ -171,3 +177,7 @@
171
177
  8.3.0
172
178
 
173
179
  ```
180
+
181
+
182
+
183
+ 有識者の方、すみませんがどうぞよろしくお願いいたします。

1

補足

2021/12/23 23:00

投稿

rick
rick

スコア18

test CHANGED
File without changes
test CHANGED
@@ -157,3 +157,17 @@
157
157
  }
158
158
 
159
159
  ```
160
+
161
+
162
+
163
+ ```ここに言語を入力
164
+
165
+ node -v
166
+
167
+ v16.13.1
168
+
169
+ npm -v
170
+
171
+ 8.3.0
172
+
173
+ ```