teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【React】エラー表示 『Module not found: Can't resolve './firebase'』を改善したい

編集履歴

質問編集履歴

2

文章訂正

2021/12/23 04:33

投稿

edu
edu

スコア35

test CHANGED
File without changes
test CHANGED
@@ -64,7 +64,7 @@
64
64
 
65
65
  firebase.js
66
66
 
67
-
67
+ ```
68
68
 
69
69
  ```
70
70
 
@@ -104,7 +104,7 @@
104
104
 
105
105
  export const db = firebaseApp.firestore();
106
106
 
107
-
107
+ ```
108
108
 
109
109
  ```
110
110
 

1

文章訂正

2021/12/23 04:33

投稿

edu
edu

スコア35

test CHANGED
@@ -1 +1 @@
1
- 【React】エラー表示『TypeError: Cannot read properties of undefined (reading 'year')』を改善したい
1
+ 【React】エラー表示 『Module not found: Can't resolve './firebase'』を改善したい
test CHANGED
@@ -1,14 +1,22 @@
1
- reactでwebフォームを作成しています。
1
+ reactで、Firebaseを使い、認証機能を作成しています。
2
2
 
3
3
 
4
4
 
5
- 『TypeError: Cannot read properties of undefined (reading 'year')』という表示を改善したいです。
5
+ 『Module not found: Can't resolve './firebase'』という表示を改善したいです。
6
6
 
7
- ※ terminal上は、『Compiled successfully!』と表示されます。
7
+ ```
8
8
 
9
+ Failed to compile
9
10
 
11
+ ./src/auth/AuthProvider.js
10
12
 
13
+ Module not found: Can't resolve './firebase'
14
+
15
+ ```
16
+
11
- エラー文を検索して、似たような感じものがなく、どのように解決したらよくわかりません。
17
+ エラー文を検索して、下記のサイトに書いてある改善方法を実行したが、改善しませんでした。
18
+
19
+ どのように解決したらよくわかりません。
12
20
 
13
21
  何方かアドバイスをお願いします。
14
22
 
@@ -16,316 +24,100 @@
16
24
 
17
25
  試したこと
18
26
 
19
- ① 『TypeError: Cannot read properties of undefined (reading 'year')』で、検索をしたが、似たようなものがなく何が原因かわからなかった。
27
+ ① 『Module not found: Can't resolve './firebase'』で、検索を、下記のサイトに書いてある改善方法を実行したが、
28
+
29
+ 改善しなかった。
30
+
31
+
32
+
33
+ ReactでModule not found: Can’t resolve ‘firebase/app’ in~の対処方法
34
+
35
+
36
+
37
+ Module not found: Can't resolve 'firebase' in
38
+
39
+
40
+
41
+ ディレクトリ構成
20
42
 
21
43
 
22
44
 
23
45
  ```
24
46
 
47
+ src
48
+
49
+ ├── auth
50
+
51
+ ├── AuthProvider.js
52
+
53
+ └── Login.js
54
+
55
+ └── PrivateRoute.js
56
+
57
+ └── SignUp.js
58
+
59
+ ├── components
60
+
25
- //Basic;.js
61
+ ├── firebase.js
62
+
63
+ ├── App.js
64
+
65
+ firebase.js
26
66
 
27
67
 
28
68
 
69
+ ```
70
+
71
+ //firebase.js
72
+
29
- import React from "react";
73
+ import firebase from "firebase/app";
74
+
75
+ import "firebase/app";
76
+
77
+ import "firebase/auth";
78
+
79
+ import "firebase/firestore";
80
+
81
+ import "firebase/database";
30
82
 
31
83
 
32
84
 
33
- import { Link } from "react-router-dom";
85
+ firebase.initializeApp({
34
86
 
35
- import {
87
+ apiKey: process.env.REACT_APP_FIREBASE_KEY,
36
88
 
37
- FormControl,
89
+ authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
38
90
 
39
- FormControlLabel,
91
+ databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
40
92
 
41
- FormLabel,
93
+ projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
42
94
 
43
- InputLabel,
95
+ storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
44
96
 
45
- Radio,
97
+ messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
46
98
 
47
- RadioGroup,
48
-
49
- Select,
99
+ });
50
-
51
- } from "@mui/material";
52
-
53
- import { motion } from "framer-motion";
54
100
 
55
101
 
56
102
 
57
- const Basic = ({ basicProfile, setBasicProfile, isConfirm }) => {
103
+ export const auth = firebase.auth();
58
104
 
59
- return (
60
-
61
- <>
62
-
63
- <motion.div
64
-
65
- initial={{ scaleY: 0 }}
66
-
67
- animate={{ scaleY: 1 }}
68
-
69
- exit={{ scaleY: 0 }}
70
-
71
- transition={{ duration: 0.5 }}
72
-
73
- >
74
-
75
- <div>
76
-
77
- <p>お客様の情報を入力して下さい</p>
78
-
79
- <div style={{ textAlign: "center" }}>
80
-
81
- <FormControl component="fieldset">
82
-
83
- <FormLabel component="gender">- 性別 -</FormLabel>
84
-
85
- {isConfirm ? (
86
-
87
- <span>{basicProfile?.gender === "male" ? "男性" : "女性"}</span>
88
-
89
- ) : (
90
-
91
- <RadioGroup
92
-
93
- row
94
-
95
- aria-label="gender"
96
-
97
- name="row-radio-buttons-group"
98
-
99
- value={basicProfile.gender}
100
-
101
- onChange={(evt) =>
102
-
103
- setBasicProfile((state) => {
104
-
105
- return { ...state, gender: evt.target.value };
105
+ export const db = firebaseApp.firestore();
106
-
107
- })
108
-
109
- }
110
-
111
- >
112
-
113
- <FormControlLabel
114
-
115
- value="male"
116
-
117
- control={<Radio />}
118
-
119
- label="男性"
120
-
121
- />
122
-
123
- <FormControlLabel
124
-
125
- value="female"
126
-
127
- control={<Radio />}
128
-
129
- label="女性"
130
-
131
- />
132
-
133
- </RadioGroup>
134
-
135
- )}
136
-
137
- </FormControl>
138
-
139
- </div>
140
-
141
- <div style={{ textAlign: "center" }}>
142
-
143
- <FormLabel component="legend">- 生年月日 -</FormLabel>
144
-
145
- <FormControl sx={{ m: 1, minWidth: 120 }}>
146
-
147
- <InputLabel htmlFor="grouped-native-select">year</InputLabel>
148
-
149
- {isConfirm ? (
150
-
151
- <span>{basicProfile.year}</span>
152
-
153
- ) : (
154
-
155
- <Select
156
-
157
- native
158
-
159
- defaultValue=""
160
-
161
- id="grouped-native-select"
162
-
163
- label="Grouping"
164
-
165
- value={basicProfile.year}
166
-
167
- onChange={(evt) =>
168
-
169
- setBasicProfile((state) => {
170
-
171
- return { ...state, year: evt.target.value };
172
-
173
- })
174
-
175
- }
176
-
177
- >
178
-
179
- <option aria-label="None" value="" />
180
-
181
- <optgroup label="year">
182
-
183
- {Array.from(Array(2020), (_, num) => (
184
-
185
- <option key={num} value={num + 1990}>
186
-
187
- {num + 1990}
188
-
189
- </option>
190
-
191
- ))}
192
-
193
- </optgroup>
194
-
195
- </Select>
196
-
197
- )}
198
-
199
- </FormControl>
200
-
201
- <FormControl sx={{ m: 1, minWidth: 120 }}>
202
-
203
- <InputLabel htmlFor="grouped-native-select">month</InputLabel>
204
-
205
- {isConfirm ? (
206
-
207
- <span>{basicProfile.month}</span>
208
-
209
- ) : (
210
-
211
- <Select
212
-
213
- native
214
-
215
- defaultValue=""
216
-
217
- id="grouped-native-select"
218
-
219
- label="Grouping"
220
-
221
- value={basicProfile.month}
222
-
223
- onChange={(evt) =>
224
-
225
- setBasicProfile((state) => {
226
-
227
- return { ...state, month: evt.target.value };
228
-
229
- })
230
-
231
- }
232
-
233
- >
234
-
235
- <option aria-label="None" value="" />
236
-
237
- <optgroup label="month">
238
-
239
- {Array.from(Array(12), (_, num) => (
240
-
241
- <option key={num} value={num + 1}>
242
-
243
- {num + 1}
244
-
245
- </option>
246
-
247
- ))}
248
-
249
- </optgroup>
250
-
251
- </Select>
252
-
253
- )}
254
-
255
- </FormControl>
256
-
257
- <FormControl sx={{ m: 1, minWidth: 120 }}>
258
-
259
- <InputLabel htmlFor="grouped-native-select">day</InputLabel>
260
-
261
- {isConfirm ? (
262
-
263
- <span>{basicProfile.day}</span>
264
-
265
- ) : (
266
-
267
- <Select
268
-
269
- native
270
-
271
- defaultValue=""
272
-
273
- id="grouped-native-select"
274
-
275
- label="Grouping"
276
-
277
- value={basicProfile.day}
278
-
279
- onChange={(evt) =>
280
-
281
- setBasicProfile((state) => {
282
-
283
- return { ...state, day: evt.target.value };
284
-
285
- })
286
-
287
- }
288
-
289
- >
290
-
291
- <option aria-label="None" value="" />
292
-
293
- <optgroup label="day">
294
-
295
- {Array.from(Array(31), (_, num) => (
296
-
297
- <option key={num} value={num + 1}>
298
-
299
- {num + 1}
300
-
301
- </option>
302
-
303
- ))}
304
-
305
- </optgroup>
306
-
307
- </Select>
308
-
309
- )}
310
-
311
- </FormControl>
312
-
313
- </div>
314
-
315
- <Link to="/Questionnaire">次へ</Link>
316
-
317
- </div>
318
-
319
- </motion.div>
320
-
321
- </>
322
-
323
- );
324
-
325
- };
326
106
 
327
107
 
328
108
 
109
+ ```
110
+
329
- export default Basic;
111
+ //AuthProvider.js
112
+
113
+
114
+
115
+ import React, { useEffect, useState } from "react";
116
+
117
+ import { auth } from "./firebase";
118
+
119
+ import { db } from "./firebase";
120
+
121
+ import firebase from "./firebase";
330
122
 
331
123
  ```