Next Js cant find Service messaging (firebase-cloud-messagin

Question

嗨，我在下一个js项目中使用firebase云消息传递，当我尝试运行或构建我的项目时，我得到这个错误:

info -检查类型的有效性
info -创建优化的生产构建
info -编译成功node:internal/process/promises:246triggerUncaughtException(err, true/* fromPromise */);^

错误:服务消息传递不可用在提供者。getImmediate(文件:///我/工作/Web/Php/项目/里面/www/测试/node_modules/@firebase/组件/dist/esm/index.esm2017.js: 147:23)在getMessagingInWindow (I:[e-mail]:1460:74)at I:WorkWebPhpProjectwampwwwtest.nextserverpages_app.js:117:83 {类型:"错误"}

我的代码:似乎这个问题的发生是因为使用getMessaging

firbase.js

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from "firebase/messaging";
var firebaseConfig = {
apiKey: "----",
authDomain: "---",
projectId: "---",
storageBucket: "---",
messagingSenderId: "---",
appId: "---",
measurementId: "---"
};
const firebaseApp = initializeApp(firebaseConfig);
const messaging =  getMessaging(firebaseApp);
export const fetchToken = (setTokenFound) => {
return getToken(messaging, {vapidKey: '---'}).then((currentToken) => {
if (currentToken) {
console.log('current token for client: ', currentToken);
setTokenFound(true);
// Track the token -> client mapping, by sending to backend server
// show on the UI that permission is secured
} else {
console.log('No registration token available. Request permission to generate one.');
setTokenFound(false);
// shows on the UI that permission is required
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
// catch error while creating client token
});
}
export const onMessageListener = () =>
new Promise((resolve) => {
onMessage(messaging, (payload) => {
resolve(payload);
});
});

firebase-messaging-sw.js

// Scripts for firebase and firebase messaging
importScripts('https://www.gstatic.com/firebasejs/9.6.11/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.11/firebase-messaging-compat.js');
// Initialize the Firebase app in the service worker by passing the generated config
const firebaseConfig = {
apiKey: "----",
authDomain: "---",
projectId: "---",
storageBucket: "---",
messagingSenderId: "---",
appId: "---",
measurementId: "---"
};
firebase.initializeApp(firebaseConfig);
// Retrieve firebase messaging
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
console.log('Received background message ', payload);
const notificationTitle = payload.notification.title;
const notificationOptions = {
body: payload.notification.body,
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});

_app.tsx

import {fetchToken,onMessageListener} from '../tools/firebase'
const [notification, setNotification] = useState({title: '', body: ''});
const [isTokenFound, setTokenFound] = useState(false);
useEffect(() => {
fetchToken(setTokenFound)
onMessageListener().then(payload => {
setNotification({title: payload.notification.title, body: payload.notification.body})
console.log(payload);
}).catch(err => console.log('failed: ', err));
}, []);

Answer 1

我有同样的问题原来是firebase v9的问题

使用firebase v8 for me

npm i firebase@8.2.3

安装v8后，不要忘记更改语法，它的firebase.initializeApp(firebaseConfig);