teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問Unhandled Runtime Errorエラー

編集履歴

質問編集履歴

3

修正

2020/09/06 00:29

投稿

tomsuma
tomsuma

スコア38

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 画面をリロードするとこのようなエラーが起きます。
5
+ siguinボタンを押すとエラーが起きます。
6
6
 
7
7
 
8
8
 

2

修正

2020/09/06 00:29

投稿

tomsuma
tomsuma

スコア38

test CHANGED
@@ -1 +1 @@
1
- グーグルでのサインインができない
1
+ Unhandled Runtime Errorエラー
test CHANGED
@@ -12,9 +12,7 @@
12
12
 
13
13
  [参考２](https://github.com/vercel/next.js/issues/1999)
14
14
 
15
- ![イメージ説明](cb4a458eba68ebde6cdb7d8dc0d9b4fe.png)
15
+ ![イメージ説明](8f6828b42f949b524a0263d4392934da.png)
16
-
17
-
18
16
 
19
17
  ```
20
18
 
@@ -22,7 +20,7 @@
22
20
 
23
21
 
24
22
 
25
- import firebase from 'firebase/app'
23
+ import * as firebase from 'firebase'
26
24
 
27
25
  import 'firebase/auth' // If you need it
28
26
 
@@ -58,15 +56,7 @@
58
56
 
59
57
 
60
58
 
61
- firebase.initializeApp(clientCredentials)
59
+ export default !firebase.apps.length ? firebase.initializeApp(clientCredentials) : firebase.app();
62
-
63
-
64
-
65
-
66
-
67
- export default { firebase, auth }
68
-
69
-
70
60
 
71
61
 
72
62
 
@@ -86,7 +76,7 @@
86
76
 
87
77
  import { useUser } from '../context/userContext'
88
78
 
89
- import { firebase, auth } from '../firebase'
79
+ import firebase from '../firebase'
90
80
 
91
81
 
92
82
 
@@ -104,9 +94,17 @@
104
94
 
105
95
 
106
96
 
107
-
97
+ // TODO: メールアドレス・パスワード認証も追加する
98
+
99
+ const email = 'aa@aa.com'
100
+
101
+ const password = 'aaaa'
102
+
103
+ const auth = firebase.auth();
108
104
 
109
105
 
106
+
107
+ // TODO: 別ファイルにする
110
108
 
111
109
  const googleSignIn = () => {
112
110
 
@@ -188,4 +186,6 @@
188
186
 
189
187
 
190
188
 
189
+
190
+
191
191
  ```

1

修正

2020/09/06 00:29

投稿

tomsuma
tomsuma

スコア38

test CHANGED
File without changes
test CHANGED
@@ -2,25 +2,75 @@
2
2
 
3
3
 
4
4
 
5
- Signボタンを押しても何も変化が起こらず、
6
-
7
- 検証ツールにてエラーが確認できました
5
+ 画面をリロードするとこのようなエラーが起きます。
8
6
 
9
7
 
10
8
 
9
+ firebaseのexport を2つに分けたり、他のサイトから記述を真似したりしたのですがダメでした、
10
+
11
+ [参考](https://qiita.com/HorieH/items/8b4b1c4807e1eb6fcb0a)
12
+
11
- [参考記事](https://github.com/vercel/next.js/issues/1999)
13
+ [参考２](https://github.com/vercel/next.js/issues/1999)
14
+
15
+ ![イメージ説明](cb4a458eba68ebde6cdb7d8dc0d9b4fe.png)
12
16
 
13
17
 
14
18
 
15
- firebaseのexportの方法に原因があると考えていて、
19
+ ```
16
20
 
21
+ firebase/index.js
22
+
23
+
24
+
25
+ import firebase from 'firebase/app'
26
+
27
+ import 'firebase/auth' // If you need it
28
+
17
- ここで提示されているエラー解決内容のコードを反映させたいのですが、firebase Authの2つをexportしたい場合はどうすればよろしいのでしょうか。
29
+ import 'firebase/firestore' // If you need it
30
+
31
+ import 'firebase/storage' // If you need it
32
+
33
+ import 'firebase/analytics' // If you need it
34
+
35
+
36
+
37
+ const clientCredentials = {
38
+
39
+ apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
40
+
41
+ authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
42
+
43
+ databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
44
+
45
+ projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
46
+
47
+ storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
48
+
49
+ messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
50
+
51
+ appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
52
+
53
+ // measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
54
+
55
+ }
18
56
 
19
57
 
20
58
 
21
59
 
22
60
 
23
- ![エラー内容](af6fdcb77b4573c2c295d64fdd281938.png)
61
+ firebase.initializeApp(clientCredentials)
62
+
63
+
64
+
65
+
66
+
67
+ export default { firebase, auth }
68
+
69
+
70
+
71
+
72
+
73
+ ```
24
74
 
25
75
 
26
76
 
@@ -42,13 +92,19 @@
42
92
 
43
93
  export default function Signin() {
44
94
 
95
+ // Our custom hook to get context values
96
+
45
97
  const { loadingUser, user } = useUser()
98
+
99
+ useEffect(() => {
100
+
101
+ console.log('user:', user)
102
+
103
+ }, [loadingUser, user])
46
104
 
47
105
 
48
106
 
49
-
50
-
51
- console.log(auth)
107
+
52
108
 
53
109
 
54
110
 
@@ -108,7 +164,7 @@
108
164
 
109
165
  <Head>
110
166
 
111
- <title>to-masu</title>
167
+ <title>Hands on Mania</title>
112
168
 
113
169
  </Head>
114
170
 
@@ -132,118 +188,4 @@
132
188
 
133
189
 
134
190
 
135
-
136
-
137
191
  ```
138
-
139
- ```
140
-
141
- userContext.js
142
-
143
-
144
-
145
- import { useState, useEffect, createContext, useContext } from 'react'
146
-
147
-
148
-
149
- export const UserContext = createContext()
150
-
151
-
152
-
153
- export default function UserContextComp({ children }) {
154
-
155
- const [user, setUser] = useState(null)
156
-
157
- const [loadingUser, setLoadingUser] = useState(true)
158
-
159
-
160
-
161
- useEffect(() => {
162
-
163
- }, [])
164
-
165
-
166
-
167
- return (
168
-
169
- <UserContext.Provider value={{ user, setUser, loadingUser }}>{children}</UserContext.Provider>
170
-
171
- )
172
-
173
- }
174
-
175
-
176
-
177
-
178
-
179
- export const useUser = () => useContext(UserContext)
180
-
181
-
182
-
183
- ```
184
-
185
-
186
-
187
- ```
188
-
189
- firebase/index.js
190
-
191
-
192
-
193
- import * as firebase from "firebase";import 'firebase/auth' // If you need it
194
-
195
- import 'firebase/firestore' // If you need it
196
-
197
- import 'firebase/storage' // If you need it
198
-
199
- import 'firebase/analytics' // If you need it
200
-
201
-
202
-
203
- const clientCredentials = {
204
-
205
- apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
206
-
207
- authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
208
-
209
- databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
210
-
211
- projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
212
-
213
- storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
214
-
215
- messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
216
-
217
- appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
218
-
219
- // measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
220
-
221
- }
222
-
223
-
224
-
225
- // Check that `window` is in scope for the analytics module!
226
-
227
- // if (typeof window !== 'undefined' && !firebase.apps.length) {
228
-
229
- // firebase.initializeApp(clientCredentials)
230
-
231
- // // To enable analytics. https://firebase.google.com/docs/analytics/get-started
232
-
233
- // if ('measurementId' in clientCredentials) firebase.analytics()
234
-
235
- // }
236
-
237
- firebase.initializeApp(clientCredentials)
238
-
239
-
240
-
241
- const auth = firebase.auth()
242
-
243
-
244
-
245
- export { firebase, auth }
246
-
247
-
248
-
249
- ```