Issue with Firebase push notifications in Version 9 - React JS

Question

I am currently setting up push notifications on my react/firebase project.

I have followed all the steps and added the firebase-messaging-sw.js, getToken etc..

I used to be able to get a FCM token back from getToken but I am no longer able to do so due to this error message:

An error occurred while retrieving token.  FirebaseError: Messaging:
A problem occurred while subscribing the user to FCM: Request contains an invalid argument. 
(messaging/token-subscribe-failed).
at requestGetToken (requests.ts:67:1)
at async getNewToken (token-manager.ts:139:1)

This error occurs when I call the getTokenFound() method

Before when this was working, I would also have problems with the service worker if I was running the same project on a different system. Only my main development system was able to not hit the service worker error:

An error occurred while retrieving token.  FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope 
('http://localhost:3000/firebase-cloud-messaging-push-scope%27) with script 
('http://localhost:3000/firebase-messaging-sw.js%27): ServiceWorker script evaluation failed 
(messaging/failed-service-worker-registration).

Two two issues seem to be persistent, often it seems like an error loop happens if I deny the notification permissions and then try to allow them again, I would get the invalid argument error.

Here are my relevant code blocks below, I'm really not sure what else to change here. The react setup for push notifications seems very inconsistent depending on what machine Im on. Many thanks for any insight!

firebase-messaging-sw.js (in public dir with index.html)

importScripts('https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.3.1/firebase-messaging.js');

const firebaseConfig = {
    apiKey: DATA,
    authDomain: DATA,
    databaseURL: DATA,
    projectId: DATA,
    storageBucket: DATA,
    messagingSenderId: DATA,
    appId: DATA,
    measurementId: DATA
  };

firebase.initializeApp(firebaseConfig);

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,
    icon: "../src/assets/image/default.svg",
    tag: "notification-1"
  };
  
  return self.registration.showNotification(
    notificationTitle,
    notificationOptions
  );
});

firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getFunctions } from "firebase/functions";
import { getStorage } from "firebase/storage";
import { getMessaging, getToken, onMessage } from "firebase/messaging";
import 'firebase/storage';

export const app = initializeApp({
  apiKey: data,
  authDomain: data,
  databaseURL: data,
  projectId: data,
  storageBucket: data,
  messagingSenderId: data,
  appId: data,
  measurementId: data
});


export const messaging = getMessaging(app);
export const firestore = getFirestore(app);
export const functions = getFunctions(app);
export const storage = getStorage(app);



export const getTokenFound = async () => {
  let currentToken = "";
  try {
    currentToken = await getToken(messaging, { vapidKey: myVapidKey});
    if (currentToken) {
      console.log("CURRENT TOKEN", currentToken)
    } else {
    }
  } catch (error) {
    console.log("An error occurred while retrieving token. ", error);
  }

  return currentToken;
};

export const onMessageListener = () =>
  new Promise((resolve) => {
    onMessage(messaging, (payload) => {
      console.log("payload", payload)
      resolve(payload);
    });
  });