yesterday my application had no problems when it wanted to request fcm tokens, suddenly now it can't, and the error that appears is:

error result

my assumption is because firebase-messaging-sw can't be active, it's not even in the build result folder, even though yesterday there was no problem at all. the firebase I'm using is version 9 so it's modular.

firebase-messaging-sw.js

import { initializeApp } from "firebase/app";
import { getMessaging } from "firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const firebaseApp = initializeApp({
    apiKey: "--------",
    authDomain: "-------",
    projectId: "------",
    storageBucket: "-----",
    messagingSenderId: "------",
    appId: "---------"
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import { initializeApp } from "firebase/app";
import './utils/firebase-messaging-sw'
import { getMessaging, getToken } from "firebase/messaging";

const firebaseConfig = {
  apiKey: "---------------------",
  authDomain: "-----------------------",
  projectId: "---------------------",
  storageBucket: "----------------------",
  messagingSenderId: "-----------------------",
  appId: "---------------------------"
};

const app = initializeApp(firebaseConfig);

const messaging = getMessaging();

getToken(messaging, { vapidKey: '---------------------------------' }).then((currentToken) => {
  if (currentToken) {
    console.log(currentToken)
  } else {
    console.log('No registration token available. Request permission to generate one.');
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
});

createApp(App).use(store).use(router).mount('#app')

after build the firebase-messaging-sw.js file should also be in it, that's what happened yesterday, but somehow now suddenly it can't

build result

because i use pwa, there should be 2 active service workers

1. service worker from Vue
2. service worker from firebase-messaging-sw

in fact the only active ones are vue's service workers

active service workers

here is my directory structure directory