FirebaseError: Messaging: We are unable to register the default service worker

[AlanGreyjoy]

When using the useToken hook, the following error occurs and I can't figure out how to fix it.

FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('https://localhost:5173/firebase-cloud-messaging-push-scope') with script ('https://localhost:5173/firebase-messaging-sw.js'): The script has an unsupported MIME type ('text/html'). (messaging/failed-service-worker-registration).
    at registerDefaultSw (chunk-TJJQGBVO.js?v=57a89067:578:25)
    at async updateSwReg (chunk-TJJQGBVO.js?v=57a89067:585:5)
    at async getToken$1 (chunk-TJJQGBVO.js?v=57a89067:622:3)

FirebaseContext

import React, { createContext, useContext, useEffect } from 'react'
import firebase from 'firebase/compat/app'
import 'firebase/compat/firestore'
import 'firebase/compat/auth'
import 'firebase/compat/analytics'
import 'firebase/compat/storage'
import 'firebase/compat/messaging'

import { useToken } from 'react-firebase-hooks/messaging'

import firebaseConfig from 'src/configs/firebaseConfig'

firebase.initializeApp(firebaseConfig)

const FirebaseContext = createContext(null)

/**
 * Firebase provider
 * @returns {firebase, auth, firestore, analytics, messaging, storage}
 */
export const useFirebase = () => useContext(FirebaseContext)

const FirebaseProvider = ({ children }) => {
  const auth = firebase.auth()
  const firestore = firebase.firestore()
  const analytics = firebase.analytics()
  const storage = firebase.storage()
  const messaging = firebase.messaging()

  const [token, loading, error] = useToken(firebase.messaging())

  console.log('token', token)
  console.log('loading', loading)
  console.log('error', error)

  const value = {
    firebase,
    auth,
    firestore,
    analytics,
    messaging,
    storage
  }

  return <FirebaseContext.Provider value={value}>{children}</FirebaseContext.Provider>
}

export default FirebaseProvider