使用 "compat" 从 v9 上的'firebase'导入火库不起作用

Question

我只想从"firebase"在我的React项目中我知道v8和v9之间有一些问题，所以我肯定使用compact来导入Firebase。然而，不知何故，它不工作。

firebase版本为9.1.2

这里是我提到的网站https://exerror.com/attempted-import-error-firebase-app-does-not-contain-a-default-export-imported-as-firebase/

我用了什么↓

import firebase from 'firebase/compat/app';

错误↓

./src/Preview.js
Module not found: Can't resolve 'firebase' in '/Users/****/Dropbox/Mac/Desktop/snapy/src'

这是我的全部代码↓

import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { useHistory } from 'react-router';
import { resetCameraImage, selectCameraImage } from './features/cameraSlice';
import "./Preview.css";
import CloseIcon from '@mui/icons-material/Close';
import { useDispatch } from "react-redux";
import TextFieldsIcon from '@mui/icons-material/TextFields';
import CreateIcon from '@mui/icons-material/Create';
import NoteIcon from '@mui/icons-material/Note';
import MusicNoteIcon from '@mui/icons-material/MusicNote';
import AttachFileIcon from '@mui/icons-material/AttachFile';
import CropIcon from '@mui/icons-material/Crop';
import TimerIcon from '@mui/icons-material/Timer';
import SendIcon from '@mui/icons-material/Send';
import { v4 as uuid } from "uuid";
import { db, storage } from './firebase';
import firebase from 'firebase/compat/app';
function Preview() {
const cameraImage = useSelector(selectCameraImage);
const history = useHistory();
const dispatch = useDispatch();
useEffect(() => {
if (!cameraImage) {
history.replace('/')
}
}, [cameraImage, history]);
const closePreview = () => {
dispatch(resetCameraImage());
};
const sendPost = () => {
const id = uuid();
const uploadTask = storage
// eslint-disable-next-line no-template-curly-in-string
.ref('posts/${id}')
.putString(cameraImage, "data_url");
uploadTask.on('state_change',
null,
(error) => {
console.log(error);
},
() => {
//Complete func
storage
.ref('posts')
.child(id)
.gedDownloadURL()
.then((url) => {
db.collection('posts').add({
image: url,
username: 'test',
read: false,
//profile picture
timstamp: firebase.firestore.FieldValue.serverTimestamp(),
});
history.replace("/chats");
});
}
);
};
return (
<div className="preview">
<CloseIcon onClick={closePreview} className='preview__close' />
<div className="preview__toolbarRight">
<TextFieldsIcon />
<CreateIcon />
<NoteIcon />
<MusicNoteIcon />
<AttachFileIcon />
<CropIcon />
<TimerIcon />
</div>
<img src={cameraImage} alt="" />
<div onClick={sendPost} className="preview__footer">
<h2>Send Now</h2>
<SendIcon fontSize="small" className="preview__sendIcon" />
</div>
</div>
);
}
export default Preview;

导出db和storage的firebase.js。↓

import firebase from 'firebase';
const firebaseConfig = {
apiKey: "***",
authDomain: "***.firebaseapp.com",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "1:***:web:***"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
const provider = new firebase.auth.GoogleAuthProvider();
export { db, auth, storage, provider };

Answer 1

主要问题是-g是全局的。这是因为我在全球和某些项目上都安装了firebase。在Root用户上执行" npm i -S firebase @ ^ 7.16.1 "命令解决了问题。

npm uninstall -g firebase-tools

在firebase—version之后，没有任何结果，那就可以了。