Failing to load JavaScript

Support
1

I just uploaded a website from GitHub. On my local environment, it works fine but once I uploaded it to Netlify, the buttons wouldn’t work. The problem seems to be that the index.js file isn’t loading. The error message I see in the dev tools is:

Failed to load resource: the server responded with a status of 404 ()
index.js:1

Site: https://courageous-peony-726d40.netlify.app/
GitHubRepo: GitHub - DBenMoshe/basketball-scoreboard: A Basketball Scoreboard to practice my Javascript

Thanks

2

Hi @DBenMoshe, thanks for the post and welcome to the Netlify Support Forums.

First of all since you are using Vite in your project, Vite builds bundles scripts with type="module" attribute.
Therefore your script tag in the html should be similar to the code below.

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

Secondly Modules creates a scope to avoid name collisions.

So it’s either you expose your functions in the index.js file to the window object

//Example
function homeOne() {
    hPoints++
    homePoints.textContent = hPoints
}

window.homeOne = homeOne

// Expose the rest of the functions to the window object

Or use addEventListener to bind your functions.

Example
// In HTML
<button id = "oneforthehometeam">+1</button>

// In index.js

  function homeOne() {
      hPoints++
      homePoints.textContent = hPoints
  }
  document.querySelector('#oneforthehometeam').addEventListener('click', homeOne)

// Add event listeners for the rest of the functions

Once you make the changes the buttons should click as expected.
Let me know the outcome.
Thanks.

3

@clarnx Thanks! I followed your instructions (I chose the first one, exposing my functions to the window object) and it worked!

I do have a couple of follow-up questions:

  1. How did you know I was using Vite in my project? I have never heard of Vite (I am still fairly new to coding).

  2. Why do the buttons work without the changes when I “Go Live” and host the website on my local environment? What about deploying to the web using Netlify is different, causing the need for those extra lines?

3: What do “create a scope,” “expose a function,” and “bind functions” mean?

1 Like
4

Hi @DBenMoshe, glad to know the suggestion help resolve your problem.
With regards to your questions, find the answers below.

1

Since you shared the GitHub repository of your project, there is a Vite configuration file called vite.config.js
Secondly the build command in your package.json file is "build": "vite build"
The information above is enough to indicate Vite is used in your project.

Vite.js, a free and open source JavaScript development server and bundler, is designed to speed up large-scale, modern web browser projects with native ECMAScript modules in the browser and JavaScript tools written in compile-to-native languages.

More information at https://vitejs.dev/

2

I am assuming when you mention “Go Live”, you mean the button at the bottom right of VS Code. The “Go Live” button uses live-server package which just serves your HTML and assets in your project folder without building and bundling.

When you deploy to Netlify, Netlify detects the package.json in your project folder, hence your project is deployed using the build command specified at the scripts section of the package.json file.
Since Vite is specified your site will be deployed and bundled using Vite
Vite also requires that scripts are bundled with type="module" attribute hence the need for the addition of type="module" to the script tag.

3

Scope determines the accessibility (visibility) of variables.

JavaScript has 3 types of scope:

  • Block scope
  • Function scope
  • Global scope

Therefore a scope is created when you add `type=“module” to the script tag to avoid variable name collisions.
More information about scope at https://developer.mozilla.org/en-US/docs/Glossary/Scope

The window object is a global variable which is available to a script whether the script is scoped or not, therefore if you want a function available globally to your application you have to add the function to the window object.
More information about the window object at https://developer.mozilla.org/en-US/docs/Web/API/Window

Another word for “bind” can be “link together”. Therefore by saying “use addEventListener to bind your functions”, what I mean is that you link together the specific function related to the event listener on the button. Therefore a click event on a specific button will call the related function that was linked.

Hope the explanations above helps clarify the questions you asked.

Thanks.

3 Likes
5

You are correct about “Go Live,” and your answers clarified everything!

Thank you so much!!

2 Likes
6

Thank you too @DBenMoshe.
Glad I was able to help.

7

Thank you @clarnx for the tremendously thorough explanations here. Glad everything is working, @DBenMoshe :raised_hands:

1 Like