I have a function to help the user scroll up to the top of the page like this:

function toTheTop(){
        document.getElementByID('topUpBtn').addEventListener('click', ()=>{
            scrollTo( { top: document.querySelector('h1').getBoundingClientRect().top,
        behavior: 'smooth'})
    });
}

export {
    toTheTop
}

I am using Webpack for code organization. I called toTheTop function in an entry point as below:

import { toTheTop } from './js/TopUpButton.js';

if(document.readyState !== 'loading') {
    console.log('document is already ready');
    toTheTop();
} 
else{
    document.addEventListener('DOMContentLoaded', ()=>{
        console.log('document was not ready'),
        toTheTop();
    });
}

export {
    toTheTop
}

I have tested this function without Webpack and it worked. However, when using with Webpack, it didn't. Inspect the console for the button I only see:

DOMContentloaded
click

But with Webpack setup, I see a weird line named beforeunload in order like this:

beforunload
click

open this line I saw:

self.addEventListener("beforeunload", function () {
  status.isUnloading = true;
});

I did not implement this code at all. I looked for the use of beforeunload - this is only used if we want to prompt something for the user before leaving a page.

My questions are: Why do I have the beforeunload event-handler in my code? Does this relate to my Webpack setup? And how can I solve my problem?

I tried to figure it out for several days, but still can't handle it.