Hi I have Web based fcm setup using django and plain html

I Have refer this https://firebase.google.com/docs/cloud-messaging/js/receive#handle_messages_when_your_web_app_is_in_the_foreground

HTML

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-analytics.js";
import { getMessaging, getToken, onMessage } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-messaging.js";

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

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

const messaging = getMessaging();

// THIS IS NOT WORKING
onMessage(messaging, (payload) => {
    console.log('Message received. ', payload);
    console.log('Message received. ', payload);
    console.log('Message received. ', payload);
});

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