Three.js - The variable "i" in question is not defined and has caused an Uncaught

I'm currently immersed in a project using three.js with the assistance of the parcel bundler.

Everything seems to be functioning perfectly on my local setup. However, upon attempting to deploy it on Netlify, I encounter the following error:

Uncaught ReferenceError: i is not defined at app.js:45:16

The section of code in app.js at line 45 reads as follows:

/*41*/  const particlesGeo = new THREE.BufferGeometry();
/*42*/  const particlesMat = new THREE.PointsMaterial({
/*43*/    size: 0.01,
/*44*/    map: loader.load(sparkleTexture),
/*45*/    transparent: true,
/*46*/  });

Surge deployment appears to function without any issues, so what could be causing this problem specifically on Netlify?


Netlify build settings:

https://i.sstatic.net/uHsNTm.png

package.json:

{
  "name": "particle-system",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html", // Added due to parcel error in netlify production
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gsap": "^3.11.3",
    "parcel": "^2.7.0",
    "three": "^0.145.0"
  }
}

Links:

Answer №1

Your app.js file contains the following line:

for (i = 0; i < particlesCount * 3; i++) {

An error is triggered during runtime because i has not been defined. Modify the code to:

for (let i = 0; i < particlesCount * 3; i++) {

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

Step-by-step guide on replacing Express API routes with React Router

I am currently working on an application that utilizes React Routes and is served with an Express server. The Express server also contains routes for API calls. Server.js const express = require('express') const path = require('path') ...

Obtaining data from a callback function within a NodeJS application

There is a function in my code that performs a backend call to retrieve an array of names. The function looks something like this: module.exports.getTxnList = function(index, callback) { ....some operations ..... .... callback(null, respon ...

Issue: Images are not displaying in jQuery slideshow.Possible cause: There

I'm currently working on developing a slideshow using jQuery and HTML. However, I've encountered an issue where only one image is displaying while the other slides are not showing up at all. I've been troubleshooting this problem but haven&a ...

"Could you please help me understand the process of receiving a JSON in an Express

When working with React, I encountered an issue where the JSON data sent to me from the front-end is in a strange format (an object with the data as a string). I am unsure how to convert it back into the object type. This is what I send: const data = { ...

Error in validating Javascript, Ajax, and PHP form entries

In order to ensure that only valid authors are added to my database on the bookshop website, I have implemented a form validation system. While the author check function works perfectly and alerts users when an author is found, there seems to be an issue w ...

Using XSLT with JavaScript

I am currently working with a set of XML files that are linked to XSLT files for rendering as HTML on a web browser. Some of these XML files contain links that would typically trigger an AJAX call to fetch HTML and insert it into a specific DIV element on ...

The challenge of transferring documents to the server

There is a form on the webpage where users can select a file and click a button to send it. <form enctype="multipart/form-data"> <input type="file" id="fileInput" /> <button type="button&quo ...

The eBay API is providing users with small thumbnail images with low resolution

Adding &outputSelector=GalleryInfo to the URL was supposed to give me a higher resolution thumbnail, but it doesn't seem to be working. I'm still new to JSON and the tutorial I'm following isn't very clear on the exact syntax needed ...

What is the best method to transform URI data encoded in base64 into a file on the server side?

Looking for a solution to save a URI-data string as a jpg on the server using only Javascript. The alternative of writing it to a canvas and reading the image from there is not ideal. Any ideas? ...

Show react-card-flip children conditionally based on a button, otherwise display one frontside and two backsides

Is it possible to achieve the following functionality using the react-flip-package? I have a card with two buttons on the front side. When I click one button, I want the card to flip to one backside, and when I click the other button, I want it to flip to ...

Is it possible to group an array of objects by a specific element?

Take a look at this example: JsFiddle Query: I'm dealing with the following JSON Array y= [ {"LngTrend":15,"DblValue":10,"DtmStamp":1358226000000}, {"LngTrend":16,"DblValue":92,"DtmStamp":1358226000000}, {"LngTrend":17,"DblValue":45,"DtmSta ...

Jquery Fails to Execute When Clicking on Radio Button

Whenever a user selects a radio button, I want to display an alert box. I have already written the jQuery code to achieve this. Here is my implementation: <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></ ...

How can we create dynamic animations with a counter in A-Frame?

I am looking for a more efficient method to sequentially execute animations one after the other, with each animation playing "X" number of times. Due to the randomness of animations being selected from arrays, I cannot consolidate them into a single long ...

Tips for managing test cases to execute on various browsers using protractor

unique challenge observing the unique challenge image provided, there are two browsers executing different test scenarios. I aim to execute spec 7 on both active browsers (browser1 and browser2) with an interactive approach like a chat application. After ...

Clicking to Load Images - Angular

Implementing a feature to load sets of images on button click instead of loading all at once. Although lazy load plugins are available, I decided to experiment with this approach. Here's the logic: Start with a data array called 'Images' co ...

"Improvements required for the search and filter functionality in the JSON

My JSON function retrieves image data and displays it in panels. Here is an example of the code: $.getJSON('iproducts.json',function(products){ var output = ""; $.each(products.appleitems, function(i, product) { output += "<di ...

Is it possible to ensure that an asynchronous function runs before the main functional component in React js?

My challenge involves extracting data from an API by manipulating a URL. Specifically, I must retrieve a specific piece of information upon page load and then incorporate it into my URL before fetching the data. var genre_id; var genre; const MOVIE_URL = ` ...

Only half of the globe is being mapped by markers

I have a unique globe design featuring a map texture that corresponds to the Latitude and Longitude of each location. As I explore the mappings, I've noticed an interesting quirk - only half of the globe is being utilized. Even when attempting to manu ...

Node 14 introduces a new feature that allows modules to be imported using absolute paths for native ES6 modules

As I develop an app in node version 14.9.0, the need for importing modules arises. To make the process cleaner and more organized, I have configured my ES6 module with "type": "module" in my package.json. My goal is to implement absolut ...

What is the best way to trigger events upward in a Backbone View hierarchy?

Running a backbone app with a structured view system, here's a simplified version of how it looks: NewsListView = Backbone.View.extend({ el: $('li#newspane'), initialize: function() { _.bindAll(this); }, render: f ...