I have implemented a feature on my website where an HTML page is loaded using AJAX without refreshing the entire page. Everything seems to be working correctly, but I have noticed that whenever the AJAX page is loaded, it triggers the webpack function twice.
Here is the HTML code:
<html lang="en" class="page"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b0bdaabbb1bdbca192e0fce2fce5">[email protected]</a>/css/boxicons.min.css" rel="stylesheet">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
...
The second HTML page follows a similar structure as shown above.
<html lang="en" class="page"><head>
<meta charset="UTF-8">
...
</body></html>
The webpack index.js file contains the following code:
async function getAccount() {
const accounts = await ethereum.enable();
const account = accounts[0];
// do something with new account here
numberLoadeds++;
...
ethereum.on('accountsChanged', function (accounts) {
getAccount();
});
This is the webpack configuration file:
const path = require('path')
module.exports = {
mode : 'development',
entry: './client/index.js',
output: {
path: path.resolve(__dirname, 'public'),
...
}
I suspect that the functions are being duplicated when the AJAX function changes the page, but I am unsure how to verify or troubleshoot this. Any assistance would be greatly appreciated. Thank you.