When working locally, Javascript runs smoothly on localhost, but encounters issues when deployed on GitHub Pages or Vercel

Could anyone shed some light on why my JavaScript code functions properly on localhost, but seems to stop working when deployed on Github Pages or Vercel?

Code on GitHub: https://github.com/Marincor/Bx-Bank

Deployed on GitHub Page:

Deployed on Vercel:

Upon inspecting the source code in dev tools for the index.html and cadastro.html pages, I noticed that the JS folder I have linked is missing.

Screenshot of DevTools Chrome Sources tab

Screenshot of GitHub JS folder

Screenshot of the script src inside the HTML file

I'm at a loss here, any suggestions or tips would be greatly appreciated.

Oddly enough, the home.html page seems to be able to access the JavaScript file without issue, it's just the index.html and cadastro.html pages that are having trouble.

javascriptdeploymentweb-deploymentgithub-pagesvercel

Answer №1

Make sure to include the ./ before your script file path, just like you do with your css links:

<script type="module" src="./Assets/JS/Index.js"></script>

Also, remember that casing matters:

<script type="module" src="./Assets/JS/index.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can one use C# and Selenium to send text to a hidden textarea with the attribute style="display: none;"?

I'm encountering an issue where I am unable to write in the textarea using the sendkeys function in Selenium. The specific textarea I am trying to target has an ID of 'txtSkillsTaught-Value' and is located after a script tag that seems to be ...

javascriptc#seleniumselenium-webdriverwebdriverwait

Which tool would be better for starting a new Angular project: angular-seed or yeoman?

I'm having trouble deciding on the best approach to create a new AngularJS application. There seem to be various methods available, such as using angular-seed from https://github.com/angular/angular-seed or yeoman - http://www.sitepoint.com/kickstar ...

javascriptangularjsgruntjsyeoman

Workaround for syncing MobX observables when toggling a select/deselect all checkbox

In my application, there is a checkbox list with a 'Select All' checkbox at the top. The list is populated by an observable array of strings. When the user clicks on 'Select All', it should check all checkboxes; subsequent clicks should ...

javascriptreactjsmobxmobx-react

Steps to send an asynchronous AJAX request to the server-side within the JQuery validation plugin using the addMethod() function

Currently, I am in the process of developing my own framework using the JQuery validation plugin to validate CRUD forms both client-side and server-side. It is crucial that these forms are not static but rather created dynamically using "handlebar.js". Fo ...

javascriptjqueryajaxvalidationjquery-validate

Guide to altering JSON using Javascript

https://github.com/smelukov/loftschool-example i am currently working on my project in this environment. I have created a friends.json file in the main folder. friends.json { "name": "John", "lastName": & ...

javascriptjsonfetch

Creating a customized bundle with Bootstrap using the Rollup tool

In the official Bootstrap 5 documentation, it mentions that we can import pre-compiled js files from bootstrap/js/dist and create a custom bundle using tools like Webpack or rollup. https://getbootstrap.com/docs/5.0/getting-started/javascript/#individual- ...

javascriptrollupbootstrap-5

The selected value from a dropdown list may occasionally come back as text

I am facing an issue with a dropdown list on my form that has Integer Values set to display text. The problem arises when I run the code to show the value and associated text, as the text is being displayed as the value itself. Is there any workaround avai ...

javascriptajaxasp.net-ajax

Divide a collection of q promises into batches and execute them sequentially

In order to achieve my objective of copying files while limiting the number of files copied in parallel based on a defined variable, I decided to divide an array of promises using calls to fs.copy into packets. These packets are then executed in series by ...

javascriptnode.jspromiseq

Console log messages not displaying in Express.js app method

const express = require("express"); const app = express(); app.listen(3000, function () { console.log("Server started at port 3000."); }); app.get("/", function (req, res) { console.log("Hello, world"); const truck = "drive"; res.send("Hello, ...

javascriptnode.jsexpressconsole.log

Analyzing User Input and Database Information with Mongodb

Here's the HTML form I'm working with: <form id="contact-form" method="POST" action="/search"> <label for="company">Phone company</label> <input type="text" name="company" value=""> &l ...

javascriptnode.jsmongodbexpress

Having trouble with the installation of nodemon globally on macOS Mojave?

When using the Visual Studio Code terminal, I ran the following command: npm install -g nodemon The output in the terminal showed: npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules npm ERR! code EACCES npm ERR! syscall access n ...

javascriptnode.jsjsonnpmnodemon

Inserting data into a JavaScript database

When attempting to add a new row to a datatable and submit it to a JSP for database insertion, an error is encountered. The error message reads: "You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the r ...

javascripthtmlajaxjsp

Tips on scrolling the web page until the desired web element is visible and carrying out necessary tasks

When searching for input, multiple table data is retrieved. A "show as text link" is present in different table rows that needs to be clicked. I wrote a code that works fine in IE on one machine but does not work on a different machine due to variations i ...

javascriptjavaseleniumselenium-webdriver

Save the value of a promise in a variable for future use in state management within a React-Native application

let storage = AsyncStorage.getItem('@location_data').then(data => data) const MainApp = () => { let [currentLocation, setCurrentLocation] = useState(storage); The current situation is that the storage variable holds a promise. How can ...

javascriptreactjsreact-native

Secure your website against XSS attacks with DOMPurify

Currently I am working on resolving a cross-site scripting (XSS) vulnerability using DOMPurify. The issue lies in the URL provided below: https://stage-xyzmysite.com/login/?rUrl=javascript:alert('hi'). In order to create a proof of concept, I am ...

javascripthtmlurlxssdompurify

Tips for rearranging objects within a jsPDF document to prevent vertical overlap when a table grows in size

I am new to React and Javascript. I have been struggling to find a solution to my issue while trying to create a .pdf document for a customer invoice using "jsPdf" along with its plugin "jspdf-autoTable". So far, everything is being generated correctly by ...

javascriptreactjsjspdfjspdf-autotable

Tips on sending a list via @Input using Angular5

I was seeking guidance on how to pass a list through an input. In my parent component, I have the following: list: Hero[] = [{Id: 2, Name: "Sll"}, {Id: 3, Name: "Sldsadasd"}] and in the HTML: <app-add-hero list="{{list}}" hero={{hero}}></app-ad ...

javascriptangular

Attempting to retrieve data from a JSON file according to the choice made by the user in a dropdown menu

My goal is to create a user interface where users can select options from a drop-down list and receive corresponding output based on their selection. The drop-down list options are populated using data from a JSON file, and the desired output is derived fr ...

javascriptjqueryjsondrop-down-menu

Setting default values for JSON objects by analyzing the data of other objects within the array

I've been grappling with this issue for about 6 days now, so please bear with me if my explanation is a bit convoluted. I'm using NVD3 to showcase graphs based on data retrieved from BigQuery. While the data and graph setup are correct, the probl ...

javascriptjqueryd3.jsnvd3.js

"Steps for implementing a multiselect feature with checkboxes, including the ability to check all and uncheck all, in a React application

After creating a custom component for selecting multiple options and adding a check all feature, the challenge arises when needing an uncheck option. Solution? Implementing an uncheck all feature alongside the select all functionality, but how to modify th ...

javascriptreactjsmaterial-uimulti-select