teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問TypeError: SignUp is not a functionエラーにより、ログイン機能が実装できない

編集履歴

質問編集履歴

14

修正

2020/09/01 08:46

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -46,6 +46,11 @@
46
46
  at discreteUpdates$1 (react-dom.development.js?61bb:24417)
47
47
  at discreteUpdates (react-dom.development.js?61bb:1438)
48
48
  at dispatchDiscreteEvent (react-dom.development.js?61bb:5881)
49
+
50
+
51
+
52
+ Failed to launch editor: TypeError: editor.toLowerCase is not a function
53
+
49
54
  ```
50
55
 
51
56
  ```

13

修正

2020/09/01 08:46

投稿

tomsuma
tomsuma

スコア38

title CHANGED
@@ -1,1 +1,1 @@
1
- TypeError: SignUp is not a functionが消えません
1
+ TypeError: SignUp is not a functionエラーにより、ログイン機能が実装できない
body CHANGED
File without changes

12

修正

2020/09/01 05:11

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -2,11 +2,9 @@
2
2
 
3
3
  プログラミング初心者です
4
4
  Next.jsを用いたログイン機能のを実装していまして、
5
- Login画面には問題なく移行できるのですが、
5
+ SignIn画面には問題なく移行できるのですが、
6
- ~~ログインボタンを押すとこのようなエラーが出ます~~、、
7
- サインインしていないのでログインできないのは当然でした
8
6
 
9
- サインインボタンを押すとエラーが起きます、、
7
+ サインインボタンを押すとエラーが起きます
10
8
 
11
9
 
12
10
 

11

修正

2020/09/01 05:11

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -210,4 +210,6 @@
210
210
  index.esm.js?abfd:106 [2020-09-01T01:16:47.798Z] @firebase/app:
211
211
  Warning: Firebase is already defined in the global scope. Please make sure
212
212
  Firebase library is only loaded once.
213
- ```
213
+ ```
214
+
215
+ ![イメージ説明](280f2068b78b4af7ecb4b55779a9baaf.png)

10

エラー修正

2020/09/01 01:38

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -206,7 +206,7 @@
206
206
  ```
207
207
 
208
208
  ```
209
- issue
209
+ 検証ツールにて
210
210
  index.esm.js?abfd:106 [2020-09-01T01:16:47.798Z] @firebase/app:
211
211
  Warning: Firebase is already defined in the global scope. Please make sure
212
212
  Firebase library is only loaded once.

9

修正

2020/09/01 01:20

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -203,4 +203,11 @@
203
203
  return config;
204
204
  }
205
205
  };
206
- ```
206
+ ```
207
+
208
+ ```
209
+ issue
210
+ index.esm.js?abfd:106 [2020-09-01T01:16:47.798Z] @firebase/app:
211
+ Warning: Firebase is already defined in the global scope. Please make sure
212
+ Firebase library is only loaded once.
213
+ ```

8

修正

2020/09/01 01:17

投稿

tomsuma
tomsuma

スコア38

title CHANGED
@@ -1,1 +1,1 @@
1
- TypeError: createLogin is not a functionが消えません
1
+ TypeError: SignUp is not a functionが消えません
body CHANGED
@@ -1,111 +1,56 @@
1
- TypeError: createLogin is not a functionエラーが消えません
1
+ TypeError: SignUp is not a functionエラーが消えません
2
2
 
3
3
  プログラミング初心者です
4
4
  Next.jsを用いたログイン機能のを実装していまして、
5
5
  Login画面には問題なく移行できるのですが、
6
- ログインボタンを押すとこのようなエラーが出ます、、
6
+ ~~ログインボタンを押すとこのようなエラーが出ます~~、、
7
+ サインインしていないのでログインできないのは当然でした
7
8
 
9
+ サインインボタンを押すとエラーが起きます、、
8
10
 
11
+
12
+
9
13
  参考資料
10
14
  [next.jsログイン機能](https://nekorokkekun.hatenablog.com/entry/2019/09/25/000041)
11
15
 
12
- 試したこと
13
- ターミナルで
14
- ```
15
16
 
16
- Could not open Login.js in the editor.
17
17
 
18
- To set up the editor integration, add something like REACT_EDITOR=atom to the .env.local file in your project folder and restart the development server.
19
18
 
20
- ```
21
- と合ったので
22
- ```
23
- .env.local
24
-
25
- # TODO. Fill in with Firebase Config
26
- NEXT_PUBLIC_FIREBASE_API_KEY="*********r8",
27
- NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN="ha********",
28
- NEXT_PUBLIC_FIREBASE_DATABASE_URL="******",
29
- NEXT_PUBLIC_FIREBASE_PROJECT_ID="h*******a",
30
- NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET="h*****m",
31
- NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=*****",
32
- NEXT_PUBLIC_FIREBASE_APP_ID=****44",
33
- NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID="****"
34
- REACT_EDITOR = atom　　追加
35
- ```
36
- としたらこのエラーは消えました
37
-
38
19
  .envやnext.config.jsも作ったのですがもしかして余計ですか？
39
20
 
40
21
  -example でwith firebaseを使っています
41
22
 
42
- SignUpがコンテキストから取れてないと思うのですが、どうすれば原因が特定できるでしょうか
43
-
44
23
  ```
45
- Login.js?5292:11 Uncaught TypeError: createLogin is not a function
46
- at handleSubmit (Login.js?5292:11)
24
+ ターミナルでのエラー
47
- at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
48
- at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
49
- at invokeGuardedCallback (react-dom.development.js?61bb:292)
50
- at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:306)
51
- at executeDispatch (react-dom.development.js?61bb:389)
52
- at executeDispatchesInOrder (react-dom.development.js?61bb:414)
53
- at executeDispatchesAndRelease (react-dom.development.js?61bb:3278)
54
- at executeDispatchesAndReleaseTopLevel (react-dom.development.js?61bb:3287)
55
- at forEachAccumulated (react-dom.development.js?61bb:3259)
56
- at runEventsInBatch (react-dom.development.js?61bb:3304)
57
- at runExtractedPluginEventsInBatch (react-dom.development.js?61bb:3514)
58
- at handleTopLevel (react-dom.development.js?61bb:3558)
59
- at batchedEventUpdates$1 (react-dom.development.js?61bb:21871)
60
- at batchedEventUpdates (react-dom.development.js?61bb:795)
61
- at dispatchEventForLegacyPluginEventSystem (react-dom.development.js?61bb:3568)
62
- at attemptToDispatchEvent (react-dom.development.js?61bb:4267)
63
- at dispatchEvent (react-dom.development.js?61bb:4189)
64
- at unstable_runWithPriority (scheduler.development.js?3069:653)
65
- at runWithPriority$1 (react-dom.development.js?61bb:11039)
66
- at discreteUpdates$1 (react-dom.development.js?61bb:21887)
67
- at discreteUpdates (react-dom.development.js?61bb:806)
68
25
 
26
+ react-dom.development.js?61bb:475 Uncaught TypeError: SignUp is not a function
27
+
69
- **省略
28
+ at handleSubmit (SignUp.js?b395:11)
29
+ at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:336)
30
+ at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:385)
31
+ at invokeGuardedCallback (react-dom.development.js?61bb:440)
32
+ at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:454)
33
+ at executeDispatch (react-dom.development.js?61bb:584)
34
+ at executeDispatchesInOrder (react-dom.development.js?61bb:609)
35
+ at executeDispatchesAndRelease (react-dom.development.js?61bb:713)
36
+ at executeDispatchesAndReleaseTopLevel (react-dom.development.js?61bb:722)
37
+ at forEachAccumulated (react-dom.development.js?61bb:694)
38
+ at runEventsInBatch (react-dom.development.js?61bb:739)
39
+ at runExtractedPluginEventsInBatch (react-dom.development.js?61bb:880)
40
+ at handleTopLevel (react-dom.development.js?61bb:5803)
41
+ at batchedEventUpdates$1 (react-dom.development.js?61bb:24401)
42
+ at batchedEventUpdates (react-dom.development.js?61bb:1415)
43
+ at dispatchEventForPluginEventSystem (react-dom.development.js?61bb:5894)
44
+ at attemptToDispatchEvent (react-dom.development.js?61bb:6010)
45
+ at dispatchEvent (react-dom.development.js?61bb:5914)
46
+ at unstable_runWithPriority (scheduler.development.js?3069:697)
47
+ at runWithPriority$2 (react-dom.development.js?61bb:12149)
48
+ at discreteUpdates$1 (react-dom.development.js?61bb:24417)
49
+ at discreteUpdates (react-dom.development.js?61bb:1438)
50
+ at dispatchDiscreteEvent (react-dom.development.js?61bb:5881)
70
51
  ```
71
- ```
72
- LogIn.js
73
52
 
74
- import React, { useContext } from "react";
75
- import { AuthContext } from "./AuthProvider";
76
- import { withRouter } from 'next/router'
77
-
78
- const Login = ( {history}) => {
79
- const Login = useContext(AuthContext);
80
-
81
- // AuthContextからlogin関数を受け取る
82
- const handleSubmit = event => {
83
- event.preventDefault();
84
- const { email, password } = event.target.elements;
85
- Login(email.value, password.value,history);
86
- };
87
-
88
- return (
89
- <div>
90
- <h1>Log in</h1>
91
- <form onSubmit={handleSubmit}>
92
- <label>
93
- Email
94
- <input name="email" type="email" placeholder="Email" />
95
- </label>
96
- <label>
97
- Password
98
- <input name="password" type="password" placeholder="Password" />
99
- </label>
100
- <button type="submit">Log in</button>
101
- </form>
102
- </div>
103
- );
104
- };
105
-
106
- export default withRouter(Login);
107
53
  ```
108
- ```
109
54
  SignUp.js
110
55
 
111
56
  import React, { useContext } from "react";

7

修正

2020/09/01 01:11

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -73,15 +73,16 @@
73
73
 
74
74
  import React, { useContext } from "react";
75
75
  import { AuthContext } from "./AuthProvider";
76
+ import { withRouter } from 'next/router'
76
77
 
77
- const createLogin = ( ) => {
78
+ const Login = ( {history}) => {
78
- const createLogin = useContext(AuthContext);
79
+ const Login = useContext(AuthContext);
79
80
 
80
81
  // AuthContextからlogin関数を受け取る
81
82
  const handleSubmit = event => {
82
83
  event.preventDefault();
83
84
  const { email, password } = event.target.elements;
84
- createLogin(email.value, password.value, history);
85
+ Login(email.value, password.value,history);
85
86
  };
86
87
 
87
88
  return (
@@ -102,9 +103,46 @@
102
103
  );
103
104
  };
104
105
 
105
- export default createLogin;
106
+ export default withRouter(Login);
106
107
  ```
107
108
  ```
109
+ SignUp.js
110
+
111
+ import React, { useContext } from "react";
112
+ import { AuthContext } from "./AuthProvider";
113
+ import { withRouter } from 'next/router'
114
+
115
+ const SignUp = ( ) => {
116
+ const SignUp = useContext(AuthContext);
117
+
118
+ const handleSubmit = event => {
119
+ event.preventDefault();
120
+ const { email, password } = event.target.elements;
121
+ SignUp(email.value, password.value);
122
+ console.log(SignUp)
123
+ };
124
+
125
+ return (
126
+ <div>
127
+ <h1>Sign up</h1>
128
+ <form onSubmit={handleSubmit}>
129
+ <label>
130
+ Email
131
+ <input name="email" type="email" placeholder="Email" />
132
+ </label>
133
+ <label>
134
+ Password
135
+ <input name="password" type="password" placeholder="Password" />
136
+ </label>
137
+ <button type="submit">Sign Up</button>
138
+ </form>
139
+ </div>
140
+ );
141
+ };
142
+
143
+ export default withRouter(SignUp);
144
+ ```
145
+ ```
108
146
  AuthProvider.jsx
109
147
 
110
148
  import React, { useEffect, useState } from "react";
@@ -116,20 +154,20 @@
116
154
  const [currentUser, setCurrentUser] = useState(null);
117
155
 
118
156
  // ユーザーをログインさせる関数
119
- const createLogin = async (email, password, history) => {
157
+ const Login = async (email, password) => {
120
158
  try {
121
159
  await app.auth().signInWithEmailAndPassword(email, password);
122
- history.push("/");　　　Next.jsでhistorｙは使わない？
160
+ router.push("/");
123
161
  } catch (error) {
124
162
  alert(error);
125
163
  }
126
164
  };
127
165
 
128
166
  // 新しいユーザーを作成しログインさせる関数
129
- const signup = async (email, password, history) => {
167
+ const SignUp = async (email, password, history) => {
130
168
  try {
131
169
  await app.auth().createUserWithEmailAndPassword(email, password);
132
- history.push("/");
170
+ router.push("/");
133
171
  } catch (error) {
134
172
  alert(error);
135
173
  }
@@ -143,8 +181,8 @@
143
181
  // Contextを使用して認証に必要な情報をコンポーネントツリーに流し込む。
144
182
  <AuthContext.Provider
145
183
  value={{
146
- createLogin: createLogin,
184
+ Login: Login,
147
- signup: signup,
185
+ SignUp: SignUp,
148
186
  currentUser
149
187
  }}
150
188
  >
@@ -153,7 +191,52 @@
153
191
  );
154
192
  };
155
193
  ```
194
+ userContext.js
195
+ ```
156
196
 
197
+
198
+ import { useState, useEffect, createContext, useContext } from 'react'
199
+ import firebase from '../firebase/clientApp'
200
+
201
+ export const UserContext = createContext()
202
+
203
+ export default function UserContextComp({ children }) {
204
+ const [user, setUser] = useState(null)
205
+ const [loadingUser, setLoadingUser] = useState(true) // Helpful, to update the UI accordingly.
206
+
207
+ useEffect(() => {
208
+ // Listen authenticated user
209
+ const unsubscriber = firebase.auth().onAuthStateChanged(async (user) => {
210
+ try {
211
+ if (user) {
212
+ // User is signed in.
213
+ const { uid, displayName, email } = user
214
+ // You could also look for the user doc in your Firestore (if you have one):
215
+ // const userDoc = await firebase.firestore().doc(`users/${uid}`).get()
216
+ setUser({ uid, displayName, email })
217
+ } else setUser(null)
218
+ } catch (error) {
219
+ // Most probably a connection error. Handle appropriately.
220
+ } finally {
221
+ setLoadingUser(false)
222
+ }
223
+ })
224
+
225
+ // Unsubscribe auth listener on unmount
226
+ return () => unsubscriber()
227
+ }, [])
228
+
229
+ return (
230
+ <UserContext.Provider value={{ user, setUser, loadingUser ,setLoadingUser}}>
231
+ {children}
232
+ </UserContext.Provider>
233
+ )
234
+ }
235
+
236
+ // Custom hook that shorhands the context!
237
+ export const useUser = () => useContext(UserContext)
238
+
239
+ ```
157
240
  また、[next.config.js](https://nextjs.org/docs/api-reference/next.config.js/introduction)この記事を読んでconfigにも自身がなくなりました、
158
241
 
159
242
  ```

6

修正

2020/09/01 00:54

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -1,6 +1,6 @@
1
1
  TypeError: createLogin is not a functionエラーが消えません
2
2
 
3
-
3
+ プログラミング初心者です
4
4
  Next.jsを用いたログイン機能のを実装していまして、
5
5
  Login画面には問題なく移行できるのですが、
6
6
  ログインボタンを押すとこのようなエラーが出ます、、
@@ -39,8 +39,8 @@
39
39
 
40
40
  -example でwith firebaseを使っています
41
41
 
42
+ SignUpがコンテキストから取れてないと思うのですが、どうすれば原因が特定できるでしょうか
42
43
 
43
-
44
44
  ```
45
45
  Login.js?5292:11 Uncaught TypeError: createLogin is not a function
46
46
  at handleSubmit (Login.js?5292:11)

5

修正

2020/09/01 00:42

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -68,6 +68,7 @@
68
68
 
69
69
  **省略
70
70
  ```
71
+ ```
71
72
  LogIn.js
72
73
 
73
74
  import React, { useContext } from "react";

4

修正

2020/08/31 23:44

投稿

tomsuma
tomsuma

スコア38

title CHANGED
@@ -1,1 +1,1 @@
1
- TypeError: createLogin is not a function
1
+ TypeError: createLogin is not a functionが消えません
body CHANGED
File without changes

3

TypeError: createLogin is not a functionエラーが消えません

2020/08/31 23:43

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,6 @@
1
+ TypeError: createLogin is not a functionエラーが消えません
2
+
3
+
1
4
  Next.jsを用いたログイン機能のを実装していまして、
2
5
  Login画面には問題なく移行できるのですが、
3
6
  ログインボタンを押すとこのようなエラーが出ます、、

2

修正

2020/08/31 23:43

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -148,4 +148,27 @@
148
148
  </AuthContext.Provider>
149
149
  );
150
150
  };
151
+ ```
152
+
153
+ また、[next.config.js](https://nextjs.org/docs/api-reference/next.config.js/introduction)この記事を読んでconfigにも自身がなくなりました、
154
+
155
+ ```
156
+
157
+ require("dotenv").config();
158
+ const path = require("path");
159
+ const Dotenv = require("dotenv-webpack");
160
+ module.exports = {
161
+ webpack: config => {
162
+ config.plugins = config.plugins || [];
163
+ config.plugins = [
164
+ ...config.plugins,
165
+ // Read the .env file
166
+ new Dotenv({
167
+ path: path.join(__dirname, ".env"),
168
+ systemvars: true
169
+ })
170
+ ];
171
+ return config;
172
+ }
173
+ };
151
174
  ```

1

修正

2020/08/31 22:02

投稿

tomsuma
tomsuma

スコア38

title CHANGED
File without changes
body CHANGED
@@ -62,56 +62,9 @@
62
62
  at runWithPriority$1 (react-dom.development.js?61bb:11039)
63
63
  at discreteUpdates$1 (react-dom.development.js?61bb:21887)
64
64
  at discreteUpdates (react-dom.development.js?61bb:806)
65
- at dispatchDiscreteEvent (react-dom.development.js?61bb:4168)
65
+
66
- handleSubmit @ Login.js?5292:11
66
+ **省略
67
- callCallback @ react-dom.development.js?61bb:188
68
- invokeGuardedCallbackDev @ react-dom.development.js?61bb:237
69
- invokeGuardedCallback @ react-dom.development.js?61bb:292
70
- invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js?61bb:306
71
- executeDispatch @ react-dom.development.js?61bb:389
72
- executeDispatchesInOrder @ react-dom.development.js?61bb:414
73
- executeDispatchesAndRelease @ react-dom.development.js?61bb:3278
74
- executeDispatchesAndReleaseTopLevel @ react-dom.development.js?61bb:3287
75
- forEachAccumulated @ react-dom.development.js?61bb:3259
76
- runEventsInBatch @ react-dom.development.js?61bb:3304
77
- runExtractedPluginEventsInBatch @ react-dom.development.js?61bb:3514
78
- handleTopLevel @ react-dom.development.js?61bb:3558
79
- batchedEventUpdates$1 @ react-dom.development.js?61bb:21871
80
- batchedEventUpdates @ react-dom.development.js?61bb:795
81
- dispatchEventForLegacyPluginEventSystem @ react-dom.development.js?61bb:3568
82
- attemptToDispatchEvent @ react-dom.development.js?61bb:4267
83
- dispatchEvent @ react-dom.development.js?61bb:4189
84
- unstable_runWithPriority @ scheduler.development.js?3069:653
85
- runWithPriority$1 @ react-dom.development.js?61bb:11039
86
- discreteUpdates$1 @ react-dom.development.js?61bb:21887
87
- discreteUpdates @ react-dom.development.js?61bb:806
88
- dispatchDiscreteEvent @ react-dom.development.js?61bb:4168
89
- react-dom.development.js?61bb:327 Uncaught TypeError: createLogin is not a function
90
- at handleSubmit (Login.js?5292:11)
91
- at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
92
- at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
93
- at invokeGuardedCallback (react-dom.development.js?61bb:292)
94
- at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js?61bb:306)
95
- at executeDispatch (react-dom.development.js?61bb:389)
96
- at executeDispatchesInOrder (react-dom.development.js?61bb:414)
97
- at executeDispatchesAndRelease (react-dom.development.js?61bb:3278)
98
- at executeDispatchesAndReleaseTopLevel (react-dom.development.js?61bb:3287)
99
- at forEachAccumulated (react-dom.development.js?61bb:3259)
100
- at runEventsInBatch (react-dom.development.js?61bb:3304)
101
- at runExtractedPluginEventsInBatch (react-dom.development.js?61bb:3514)
102
- at handleTopLevel (react-dom.development.js?61bb:3558)
103
- at batchedEventUpdates$1 (react-dom.development.js?61bb:21871)
104
- at batchedEventUpdates (react-dom.development.js?61bb:795)
105
- at dispatchEventForLegacyPluginEventSystem (react-dom.development.js?61bb:3568)
106
- at attemptToDispatchEvent (react-dom.development.js?61bb:4267)
107
- at dispatchEvent (react-dom.development.js?61bb:4189)
108
- at unstable_runWithPriority (scheduler.development.js?3069:653)
109
- at runWithPriority$1 (react-dom.development.js?61bb:11039)
110
- at discreteUpdates$1 (react-dom.development.js?61bb:21887)
111
- at discreteUpdates (react-dom.development.js?61bb:806)
112
- at dispatchDiscreteEvent (react-dom.development.js?61bb:4168)
113
67
  ```
114
- ```
115
68
  LogIn.js
116
69
 
117
70
  import React, { useContext } from "react";
@@ -162,7 +115,7 @@
162
115
  const createLogin = async (email, password, history) => {
163
116
  try {
164
117
  await app.auth().signInWithEmailAndPassword(email, password);
165
- history.push("/");
118
+ history.push("/");　　　Next.jsでhistorｙは使わない？
166
119
  } catch (error) {
167
120
  alert(error);
168
121
  }