I have a file of JS code that is running twice when using my webpack bundler. I am bundling two files into one entry point: fetchSymptoms.js and diagnosisSymptoms.js. I have one output: bundle.js. I start off on an html page called index.html, and when I move to a new HTML page, the code in fetchSymptoms.js runs all over again. I know this because I've used console.log() statements that print again on the new HTML page.
I am not sure how to stop the code from running twice inside fetchSymptoms.js. I can't figure out what is triggering it, the only thing I can think of is it's somehow because I am navigating to two different HTML page but using one bundle.js output? I also import the same function (fetchToken) in fetchSymptoms.js and diagnosisSymptoms.js, and maybe somehow that's causing it? I also have two functions declared globally in diagnosisSymptoms.js, perhaps that is somehow a trigger?
For some more explanation of how I get from one HTML page to the other: I start from index.html, press a button which triggers getChecked() and moves me to the html page next.html, and onLoad in next.html I call printChecked(). getChecked() and printChecked() are global functions.
Here is the relevant code from fetchSymptoms.js, the console.log() statements are what print twice, once per HTML page:
import { fetchToken } from './getAPIToken.js';
fetchToken()
.then(token => {
console.log("before adultmalesymptoms");
fetchAdultMaleSymptoms(token);
//fetchAdultMaleSymptoms is an async function that fetches
//symptoms from an API... it triggers a lot of other async functions, cut for brevity
console.log("after adultmalesymptoms");
})
.catch(error => {
console.error('Error in fetchSymptoms ', error);
});
Here is the code from diagnosisSymptoms.js:
const { fetchToken } = require('./getAPIToken');
function getChecked(){ //displays symptoms from checked checkboxes
console.log("getChecked running");
//alert("hello!");
const checkboxes = document.getElementsByName("symptom"); //items contains nodelist with the checked symptoms
const array=[]; //create empty array
const idArray= [];
for (var i = 0; i < checkboxes.length; i++){ //run through the nodelist
if (checkboxes[i].type == "checkbox" && checkboxes[i].checked == true){
if (!array.includes(checkboxes[i].value)){ //if the symptom is not already in array, then push
array.push(checkboxes[i].value); //add checked items to array
idArray.push(checkboxes[i].id);
}
}
}
//remove any non-digit characters from idArray
const numericIds = idArray.map(id => id.replace(/\D/g, '')); //regex
//console.log(numericIds);
const jsonArray = JSON.stringify(array); //converts to json string
sessionStorage.setItem("checked", jsonArray); //will disappear when browser window closed, can use localStorage
const jsonIDArray = JSON.stringify(numericIds); //converts to json string
sessionStorage.setItem("ids", jsonIDArray);
}
window.getChecked = getChecked;
function printChecked(){
//console.log("hello there!");
const string = sessionStorage.getItem("checked"); //get the json string
const parsedArray = JSON.parse(string); //parse to get a json object
const valuesArray = Object.values(parsedArray); //convert object values into array
var stringUnderscores = valuesArray.join(', '); //converts array into string including underscores
var stringWithSpaces = stringUnderscores.replace(/_/g, ' '); //remove underscores
const newText = document.createTextNode(stringWithSpaces); //create new text node
document.getElementById("potentialDiagnosis").append(newText); //append text node to h2
const idString = sessionStorage.getItem("ids");
fetchDiag(idString);
}
window.printChecked = printChecked;
function fetchDiag(idString){
//this is where I'd run the fetchToken function again, cut for brevity
}
And here is my webpack config file:
const path = require('path');
const Dotenv = require('dotenv-webpack');
module.exports = {
entry: ['./public/js/fetchSymptoms.js', './public/js/diagnosisSymptoms'],
output: {
filename: 'bundle.js', //output bundle filename, where result is going to go
path: path.resolve('public'), //output directory
},
mode: 'none',
module: {
rules: [
{
test: /\.js$/, // Match JavaScript files
exclude: /node_modules/, // Exclude node_modules
use: {
loader: 'babel-loader', // Use Babel to transpile JavaScript
options: {
presets: ['@babel/preset-env'] // Use the preset for modern JavaScript
}
}
}
]
},
plugins: [
new Dotenv(),
],
resolve: {
extensions: ['.js'],
alias: {
'crypto-js': path.resolve(__dirname, 'node_modules/crypto-js'),
},
},
};