File runs twice when using Webpack Bundle when I move to new HTML page

24 Views Asked by At

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'),
    },
  },
};


0

There are 0 best solutions below