reactで開発中に.Module not found: Can't resolve './firebase' in 'のエラーが出る。

Question

./src/components/List/list.js
Module not found: Can't resolve './firebase' in '/Users/suzukitoshinari/Desktop/e-todo-app/src/components/List'
のエラーが解決できません。
firebaseを再インストールしてみましたが、改善できません。
よろしくお願いします。
以下コードです。

//firebase.jsファイルです

import * as firebase from 'firebase/app';
// import firebase from 'firebase';
import 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

const firebaseApp = firebase.initializeApp({
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
    measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID
});

export const db = firebaseApp.firestore();
export const auth = firebase.auth();

// export default firebase;

//.envファイル


REACT_APP_FIREBASE_APIKEY="AIzaSyDsCrdfkOeSAUcnfy05BxNBcklFJSlnbqI"
REACT_APP_FIREBASE_DOMAIN="e-todo-app.firebaseapp.com"
REACT_APP_FIREBASE_DATABASE="https://e-todo-app.firebaseio.com"
REACT_APP_FIREBASE_PROJECT_ID="e-todo-app"
REACT_APP_FIREBASE_STORAGE_BUCKET="e-todo-app.appspot.com"
REACT_APP_FIREBASE_SENDER_ID="520504304260"
REACT_APP_FIREBASE_APP_ID="1:520504304260:web:f2b449c244d5b32624d8d1"
REACT_APP_FIREBASE_MEASUREMENT_ID="G-K189C3ST6E"

//list.jsファイル


import React, { useState, useEffect }　from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { TextField, List, ListItem, Checkbox } from '@material-ui/core';
import AudiotrackIcon from '@material-ui/icons/Audiotrack';
import AddBox from '@material-ui/icons/Add';
import DeleteForeverIcon from '@material-ui/icons/DeleteForever';
import { v4 as uuidv4 } from 'uuid';
import db from './firebase';

list.jsファイルでfirebase.jsからdbをimportしていますが、エラーが出てしまいます。
よろしくお願いします！！

Answer 1

firebase.jsでexport const dbとしているのでimport {db} from './firebase'が正しいと思います
export default dbの場合はimport db from './firebase'となります

Comments

[suzukitoshinari]

変更したのですが、やはり上記のエラーが出てしまいます。
いろいろネット上で調べやってみたのですが、改善できない状態です。
他に原因はありますでしょうか？

[mikan3rd]

importのpathが間違っていませんか？
`src/components/List/firebase.js` であれば上記の記述で問題ありませんが、相対pathであればディレクトリ構成によって変える必要があります
例えば`src/firebase.js`であれば `import {db} from '../../firebase` になると思います

[suzukitoshinari]

mikan3rdさんありがとうございます！解決できました！