Category: javascript

there is small part of my code throwing error on some of devices with possible solutions:
a) If you want to synchronously execute, mark it as a Worklet
b) If you want to execute this method on JS thread, wrap it using runOnJS.

Error appear only on certain devices.

    const movingStyle = useAnimatedStyle(() => {
        'worklet';
        return {
            transform: [
                {
                    translateX: withSpring(translateX.value, {
                        damping: 10,
                        restSpeedThreshold: 5,
                    }),
                },
            ],
        };
    });


    return (
        <PanGestureHandler onGestureEvent={swipeGestureHandler}>
            <Animated.View style={[movingStyle, styles.profilecontainer]}>
                <ImageBackground> ... </ImageBackground>
            </Animated.View>
        </PanGestureHandler>
    );

I tried to wrap it into runOnJS or use Worklet, but none of them worked for me.

I would be grateful for help.

I’m currently trying to shoot little squares from one object (position) to another. To achieve this, I am using Three.js for the drawing/rendering together with GSAP for the animations. My current code to perform the animation looks as follows:

gsap.to(obj.position, {
        duration: 1, 
        x: destinationObj.position.x, 
        y: destinationObj.position.y, 
        z: destinationObj.position.z, 
    })

It is possible that my destination object coordinates change during the animation. However, with my current code the object still shoots to the old coordinates, which doesn’t look nice. Is there a way to continuously update the destination coordinates during the animation such that my objects adjust their course when necessary?

In my Next Js 13 app i’m using dynamic routing. and in the first screen i’m fetching the data from server and storing it in an array. so whenever the user selects an item it will redirect them to a detail page. so my question is how can i pass the selected item list to the next page along with dynamic routing?

home page

 {house.images.map((img, index) => {
          return (
            <Link
              href={{
                pathname: `/living/${house.id}`,
                query: { house: house },
              }}
              key={index}
            >
              <div
                key={index}
                className=" w-full relative -z-10 pt-[100%] cursor-pointer"
              >
                <Image
                  src={img}
                  alt="profile"
                  fill
                  className="w-full h-full top-0 left-0 -z-10 object-cover rounded-2xl ease-in-out duration-200"
                />
              </div>
            </Link>
          );
        })}

and detail page

function DetailPage({ params: { homeid } }) {
  const router = useRouter();
  const { house } = router.query;
  //... the rest of the code
}

and this displays an error b/c i’m using next/router.

i’m have built an image gallery for users using Firebase Storage and React.
Upload and delete. My problem is deletion takes longer than it should.

Should happen:
Click on trashcan > confirm modal pops up > user clicks confirm > confirm disappears and delete process happens.

What happens:
Click on trashcan > confirm modal pops up > user clicks confirm > confirm disapears > user clicks on trashcan again > delete process happens and another confirm pops up.

export default function EditImageGallery({ handleUser }) {
  const imageListRef = useRef(ref(storage, `images/${handleUser}`));
  const [imageList, setImageList] = useState([]);

  const [hidden, setHidden] = useState(true);
  const [continueDelete, setContinueDelete] = useState(false);

  //lists all images in a users repo
  useEffect(() => {
    listAll(imageListRef.current).then(async (response) => {
      const promises = response.items.map((item) => getDownloadURL(item));
      const urls = await Promise.all(promises);
      setImageList(urls);
    });
  }, []);

  //Delete process
  const onDelete = async (e) => {
    const { id } = e.target;
    console.log("onClick Url", id);

    setHidden(false);
    // set in the confirm modal
    if (continueDelete === true) {
      //delete in storage
      const deleteRef = ref(storage, id);
      console.log("continue with the process:", deleteRef);
      deleteObject(deleteRef)
        .then(() => {
          console.log("Item was deleted from Firebase Storage", deleteRef);
        })
        .catch((error) => {
          console.log(error.message);
          toast.error(error.message);
        });

      //delete reference in firestore
      try {
        const imageDelete = collection(db, "images");
        const q = query(imageDelete, where("imageURL", "==", id));
        const snaps = await getDocs(q);
        snaps.docs.forEach((doc) => {
          console.log("Deleted Doc: ", doc);
          console.log("Deleted Doc: ", doc.ref);
          deleteDoc(doc.ref);
          // window.location.reload(true);
        });
      } catch (error) {
        console.log(error.message);
      }
    }
    setContinueDelete(false);
  };

  //show/hide confirm modal
  const toggleConfirm = () => {
    setHidden(!hidden);
  };

  //confirm deletion by modal
  const confirmDelete = () => {
    setContinueDelete(true);
  };

  return (
    <>
      {!hidden && (
        <ConfirmModal
          handleToggle={toggleConfirm}
          handleContinueDelete={confirmDelete}
        />
      )}
      <div className="w-full sm:w-4/5 container px-2 mx-auto pt-1 m-10">
        <div className="-m-1 flex flex-wrap md:-m-2">
          {imageList.map((url, index) => {
            // console.log(url, index);
            const imageURL = url.replace(
              `https://firebasestorage.googleapis.com`,
              ``
            );
            return (
              <>
                <div
                  key={url}
                  className="relative flex w-full md:w-1/4 sm:w-1/2 flex-wrap"
                >
                  <div className="w-full p-1">
                    <img
                      src={`https://ik.imagekit.io/ajuaxvsrja/tr:q-50/${imageURL}`}
                      alt={`portfolio-${index + 1}`}
                    />
                    {/* Delete process starts here */}
                    <BsTrash
                      title="delete"
                      className="h-8 w-8 rounded-full bg-transparent absolute right-2 top-2 z-5 p-2 m-1 ring ring-red-600 text-red-600 text hover:ring-red-800 hover:text-red-800 cursor-pointer"
                      onClick={onDelete}
                      id={url}
                    />
                  </div>
                </div>
              </>
            );
          })}
        </div>
      </div>
    </>
  );
}

Please let me know what in my code could be causing this.
I’m happy to add more code if you need to know something in particular.

I made a little express setup with threejs installed. I installed ThreeJS with the command “npm install three”. I have a public folder with both a .html and a .js file, the page is displayed, I’m sure the .js file is linked properly because I put a console.log on it and I see the console log in the console of my browser. But the problem comes from threejs itself, the line “import * as THREE from ‘three’;” is the problem. I get the error:
“p://localhost:3000/three net::ERR_ABORTED 404 (Not Found)” due to the import.

Here’s my app.js (express and nodejs setup:

const express = require('express')
const app = express()
const port = 3000

app.use(express.static('public'));

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

Here’s my HTML :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <h1>yo bro who gotchu smile like that</h1>
</body>
</html>

And the JS attached to the page:

import * as THREE from 'three';

// Create a scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

I don’t want to use a CDN, I want to develop with code that is on my machine, but it seems like the js code can’t access threejs’ module. Maybe someone already asked for this kind of problem but I didn’t find any answers online… Do you know what happens? Have a nice day.

I have a peculiar error in which the .js file is generated successfully through the sudo tsc sandbox.ts (I use a mac running the latest version and use MAMP for localhost). Now for the peculiar part, let’s say in the .ts file I put some comments and afterwards console.log("Hello World") and then run the command for the .js file. The .js file gets generated with no issues. Afterwards I add the .js file to an html file through the line <script type="text/javascript" src='file.js'></script>. Now what the browser sees is everything until the console.log line (it’s just not there like it’s not written,not any errors or 404’s). I have tried running a separate new js file and it worked with no issues as well inside of the html page.

Also good to mention in the tsconfig file I have set the target for ES6.

I (14) am working on my first Obsidian extension. It is the first time using TypeScript, and I don’t have a lot of experience with JavaScript. I’m wanting to build an extension, that changes a p5.js code block, into a HTML element with the p5 code rendered in it. I figured out how to replace the codeblock for an HTML element, but i can’t get the js code to run. Not only when it contains p5, also when trying to console.log(). I’m probably missing something very obvious, but with this as my first non-python/html project, i really can’t find what I’m doing wrong.

The HTML part itself did work when i opened it in my browser, but when adding this code as an HTML element in Obsidian, the JavaScript didn’t run.

The working HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>p5.js Sketch</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
  </head>
  <body>
    <h1>p5.js Sketch</h1>
    <div id="sketch-container"></div>
    <script>
      function setup() {
        createCanvas(400, 400);
      }

      function draw(){
        background(220);
        ellipse(mouseX, mouseY, 50, 50);
      }

      new p5(function(sketch) {
        sketch.setup = setup;
        sketch.draw = draw;
      }, 'sketch-container');
    </script>
  </body>
</html>

The code block marked p5js with ```p5js in Obsidian:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  if (mouseIsPressed) {
    fill(0);
  } else {
    fill(255);
  }
  ellipse(mouseX, mouseY, 80, 80);
}

The entire main.ts file:

import { App, Editor, MarkdownView, Modal, Notice, Plugin, PluginSettingTab, Setting } from 'obsidian';
import p5 from "p5";

export default class MyPlugin extends Plugin {
    async onload() {
        this.registerMarkdownCodeBlockProcessor('p5js', (source, el) => {
            const code = source.trim();
            // Replace the code block with a basic HTML structure
            el.innerHTML = `
                <!DOCTYPE html>
                <html>
                <head>
                    <meta charset="UTF-8" />
                    <title>p5.js Sketch</title>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
                </head>
                <body>
                    <h1>p5.js Sketch</h1>
                    <div id="sketch-container"></div>
                    <script>
                    ${code}

                    new p5(function(sketch) {
                        sketch.setup = setup;
                        sketch.draw = draw;
                    }, 'sketch-container');
                    </script>
                </body>
                </html>
            `;
          });
    }
}

The codeblock when in reading mode:

How to re-render UI template base on condition vuejs

<template>
  <text-box v-model="value" :rules="setValidate" />
</template

<script>
 export default {
  data() {
   return {
    setValidate : [],
   }
  },
  watch: {
    value(newValue){
        if(newValue === 'Modern') {
            this.setValidate = [(item) => !!item || 'This is required']
        } else {
            this.setValidate = [item => item]
        }
    }
  }  
}
</script>

I wanted to set the require rules base on watcher if input is Modern it will be required field otherwise it will be non require field. I am guessing it is not re-rendering template rule base on watcher, how can we fix it please guide

Thank you

I have an object which has a basic structure as below. So it is a dynamic array of n sections with dynamic number of fields within it.

let sections = [{
        "id": "my-section-1",
        "visible": true,
        "fields": [{}]
    }
]

Also, any of these section can have like a row of information/fields within it, in which case the structure is as below:

let sections = [{
        "id": "my-section-1",
        "visible": true,
        "fields": [{
            "gridItems": [{
            }] // Array of fields
        }]
    }
]

Below is a more expanded/complete example with multiple attributes:

let sections = [
    {
        "id": "my-section-1",
        "visible": true,
        "fields": [{
                "id": "my-field-1",
                "mandatory": true,
                "items": {},
                "gridItems": [],
                "value": "My Field Val 1",
                "fieldLabel": "My Field",
            },{
                "id": "my-field-with-container-2",
                "mandatory": true,
                "items": {},
                "gridItems": [{
                    "id": "my-grid-item-field-1",
                    "mandatory": true,
                    "items": {},
                    "value": "My Grid Item Field Val 1",
                    "fieldLabel": "My Field",
                },{
                    "id": "my-grid-item-field-2",
                    "mandatory": true,
                    "items": {},
                    "value": "My Grid Item Field Val 2",
                    "fieldLabel": "My Field",
                }
                ],
                "value": "My Container Field",
                "fieldLabel": "My Field",
        }]
    }, {
        "id": "my-section-2",
        "visible": true,
        "fields": [
        ]
    }
]

There are certain field attributes which I would have on the client-side and few on the server-side. I can have objects on both the sides (can use common field/section IDs to identify).
How can I merge the two?
So if my client-side object is as below:

let sections = [
    {
        "id": "my-section-1",
        "visible": true,
        "fields": [{
                "id": "my-field-1",
                "mandatory": true,
                "items": {},
                "gridItems": []
            },{
                "id": "my-field-with-container-2",
                "mandatory": true,
                "items": {},
                "gridItems": [{
                    "id": "my-grid-item-field-1",
                    "mandatory": true,
                    "items": {}
                },{
                    "id": "my-grid-item-field-2",
                    "mandatory": true,
                    "items": {}
                }
                ]
        }]
    }, {
        "id": "my-section-2",
        "visible": true,
        "fields": [
        ]
    }
]

and the server-side object is as below:

let sections = [
    {
        "id": "my-section-1",
        "visible": true,
        "fields": [{
                "id": "my-field-1",
                "value": "My Field Val 1",
                "fieldLabel": "My Field",
            },{
                "id": "my-field-with-container-2",
                "gridItems": [{
                    "id": "my-grid-item-field-1",
                    "value": "My Grid Item Field Val 1",
                    "fieldLabel": "My Field",
                },{
                    "id": "my-grid-item-field-2",
                    "value": "My Grid Item Field Val 2",
                    "fieldLabel": "My Field",
                }
                ],
                "value": "My Container Field",
                "fieldLabel": "My Field",
        }]
    }, {
        "id": "my-section-2",
        "visible": true,
        "fields": [
        ]
    }
]

Is there some JavaScript library that I can use to merge these two? Also, in case it makes it easier, I can tweak the structure slightly.

Note there is only one level nesting for gridItems i.e. it can only contain array of fields, but the inner fields cannot have any further gridItems.

I am a beginner with Javascript and I am still experimenting with how things work. My knowledge is very limited. Excuse me if I phrase something falsely.

I am trying to make a dynamic system in which the length of an array prints out an amount buttons accordingly. My issue lies on the buttons’ function. I want each button to change the src of an image according to the array I made once clicked.

eg:

• Def button -> changes the src of img to a singular variable (default url)
• Array button #1 -> changes the src of the img to array variable #1
• Array button #2 -> changes the src of the img to array variable #2
• etc…

Here’s how my code looks thus far:

HTML:

<img src="#" id="diplayimg">
<div class="charskins">
  <p><span id="data_skins"></span></p>
</div>

JS:

//this is the default src the image is going to have
let diplayimgPath = 'imagedef.png';

//name = text displayed on the new button and url = the new src of the image
let skinsData = {
  skins: [
    { name: 'Skin 0', url: 'image1.png' },
    { name: 'Skin 1', url: 'image2.png' }
    //Note that there can be added as many arrays of objects as I like here
  ]
}

let defaultskin = '<button onclick="changeSkinDef()">Default</button>';

function changeSkinDef() {
  document.getElementById("diplayimg").src = diplayimgPath;
}

if (document.getElementById("data_skins")) {
  function changeSkinNew() {
    skinspathFinal = '';
    for (let i = 0; i < skinsData.skins.length; i++) {
      let skinimg = document.getElementById("diplayimg");
      skinimg.setAttribute("src", skinsData.skins[i].url);
      skinspathFinal += skinimg;
    }
    return skinspathFinal;
  }

  function printSkins(){
    let skinsFinal = '';
    for (let i = 0; i < skinsData.skins.length; i++) {
      skinsFinal += '<button onclick="changeSkinNew()">' + skinsData.skins[i].name + '</button>';
    }
    return defaultskin + skinsFinal;
  }
  document.getElementById("data_skins").innerHTML= printSkins();
}

The buttons are printed normally with their given “names”. The new urls of the images are read correctly too, however the new buttons change the src of the image only to one specific url I have set in the objects’ array.

eg:

• Array button #1 -> changes src to variable #1
• Array button #2 -> changes src to variable #1, again

I reckon the changeskinNew() function is causing the problem, since all new buttons activate the same function once clicked, but I have no clue how I can make the functions dynamic as well.

Any suggestions on how I can make this work?

ps: I have tried using the forEach and createElement method to manually create the buttons, but it did not seem to work either.

I have two state variable that I update them in func function . we know every render in component has own setTimeout . so when I write text fast in input ، I expect that result of number state be 1 once . Its result is 1 but it log twice in console . why?

export default function Mycomponent() {
  const [number,setnumber] =useState(0);
  const [string,setstring] =useState('');
  function func(event){
     
    setstring(event.target.value);
    setTimeout(()=>{
      setnumber(number+1);
    },3000);
    // 1_ every render has own setTimeout  so when I write text fast in input  I expect that result of number be 1 once .
    // its result is 1 but it log twice in console. why ??? 
    

      
  }
  console.log(number,string);
  return (
    <>
      <input type='text'onChange={(e)=>{func(e)}} value={string}/>
      
    </>
  )
  
}

I have been trying to play a wav file which is received from the server as a base64 string.
Everything works perfectly but there’s a click sound at the beginning of the audio. I have checked the base64s string is corrupted or not here and it seems fine.
So how to get rid of that click sound?
A complete working code is given here with base64 string.

NB: Wav is a 16bit pcm(pcm_s16le) audio with sample rate as 24000.

socket.on('playAudio', function (msg) {
    // msg.data is a base64 string
    var byteChars = atob(msg.data);
    var AudioContext = window.AudioContext || window.webkitAudioContext;
    var audioCtx = new AudioContext({latencyHint: 'interactive',sampleRate: 24000})
    // console.log(byteChars);
    var byteNumbers = new Array(byteChars.length);
    for (let i = 0; i <= byteChars.length; i++) {
        byteNumbers[i] = byteChars.charCodeAt(i);
    }
    
    var byteArray = new Uint8Array(byteNumbers);
    var frameCount = byteArray.length/2;
    console.log("framecount:",frameCount)
    var myAudioBuffer = audioCtx.createBuffer(1,frameCount, 24000);
    var nowBuffering = myAudioBuffer.getChannelData(0, 24000);
    for (let i = 0; i < frameCount; i++){
        var byteA = byteArray[i * 2];
        var byteB = byteArray[i * 2 + 1];
        var result = (((byteB & 0xFF) << 8) | (byteA & 0xFF));
        var sign = byteB & (1 << 8);
        var x = ((byteB & 0xFF) << 8 | (byteA & 0xFF));
        if (sign) result = 0xFFFF0000 | x;
        nowBuffering[i] = ((result + 32768) % 65536 - 32768) / 32768.0;
        
    }
    
    var source = audioCtx.createBufferSource();
    source.buffer = myAudioBuffer;
    source.connect(audioCtx.destination);
    source.start();
    
});

Im doing a Netflix clone while watching this video and im at 2:18:32. This video got shared by Sonny 6 months ago. So its not updated. And im receiving errors when i do the things that shared 6 months ago. at 2:18:32 of video, what should i do in firebase.js and SignupScreen.js to be avoid of errors.

I have tried that before posting this thread. I did this into SignupScreen.js.

import { useRef } from "react";
import React from 'react';
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
import "./SignupScreen.css";

function SignupScreen() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  const register = (e) => {
  const auth = getAuth();
  createUserWithEmailAndPassword (auth, emailRef.current.value, passwordRef.current.value)
  .then((userCredential) => {
    const user = userCredential.user;
    console.log(user);
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    alert (errorCode, errorMessage)
  });
};

  const signIn = (e) => {
    const auth = getAuth();
    signInWithEmailAndPassword (auth, emailRef.current.value, passwordRef.current.value)
    .then((userCredential) => {
    const user = userCredential.user;
    console.log(user);
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
    alert (errorCode, errorMessage)
  });
  }`

And i have tried that in firebase.js :

import firebase from 'firebase';
import { signInWithEmailAndPassword, getAuth, createUserWithEmailAndPassword } from "firebase/auth";

const firebaseConfig = {
  apiKey: "AIzaSyBhoDeCtm2ZS3qzr0eWX8IF9-VzvIHAoKQ",
  authDomain: "netflix-clone-31bcf.firebaseapp.com",
  projectId: "netflix-clone-31bcf",
  storageBucket: "netflix-clone-31bcf.appspot.com",
  messagingSenderId: "615955108716",
  appId: "1:615955108716:web:39e22e96678e1141d3d949"
};

const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();

export { signInWithEmailAndPassword, getAuth, auth, createUserWithEmailAndPassword }
export default db;

And i got an error when i press to sign in button.

Error : Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options). FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options).

I am trying to implement zoom functionality in candlestick chart. I am currently using jscharting library from https://jscharting.com.

I have successfully able to show candlestick chart but when I am trying to implement zoom functionality I am facing issues.
Here is the how I tried to implement it.

                  function applyZoom(range) {
            range[0] = parseInt(range[0].toFixed(0));
            range[1] = parseInt(range[1].toFixed(0));
            var data = chart.series('my chart').points().items;
            var from = data[range[0]].x, to = data[range[1]].x;
            data[range[0]].zoomTo();
            chart.axes('x').zoom(from);
        };
   
           var options = {
                type: 'candlestick',
                debug: true,
                title_label_text: 'my chart',
                palette: 'fiveColor18',
                legend: {
                    template: '%icon %name',
                    position: 'inside top left'
                },
                axisToZoom: 'x',
                xAxis: {
                    crosshair: { enabled: true },
                    scale: {
                        type: 'time',
                        defaultBreak: { type: 'hidden' },
                        breaks: [
                            {
                                weekday: [0, 6],
                                offset: {
                                    unit: 'day',
                                    multiplier: -0.5
                                }
                            }
                        ]
                    }
                },
                yAxis: [
                    {
                        id: 'yMain',
                        crosshair_enabled: true,
                        orientation: 'opposite',
                        scale: { range_padding: 0.1 },
                        markers: []//
                    },
                    {
                        id: 'yVol',
                        visible: false,
                        scale: {
                            syncWith: 'none',
                            range: { padding: 1.5, min: 0 }
                        }
                    }
                ],
                defaultPoint_radius: 100,
                toolbar: {
                    items: {
                        label: {
                            type: 'label',
                            label_text:
                                '<chart scale width=500 min=' + 0 + ' max=' + (data.length - 1) + ' interval=25>',
                            boxVisible: false,
                            position: 'bottom',
                            itemsBox: {
                                visible: true,
                                boxVisible: false
                            },
                            items: {
                                slider: {
                                    type: 'range',
                                    width: 500,
                                    value: [0, data.length - 1],
                                    min: 0,
                                    max: data.length - 1,
                                    events_change: applyZoom
                                }
                            }
                        }
                    }
                },
                navigator: {
                    toolbarVisible: true,
                    xScrollbarEnabled: true,
                    previewAreaVisible: false
                },
                series: [
                    {
                        name: 'Volume',
                        type: 'column',
                        yAxis: 'yVol',
                        defaultPoint: { opacity: 0.85 },
                        points: [],
                        events_show: function () { alert('ok'); }
                    },
                    {
                        yAxis: 'yMain',
                        name: 'my chart',
                        points: []
                    }
                ],
            };
            options.series[0].points = volume;
            options.series[1].points = ohlc;
            $chartEl.JSC(options);
            chart = $chartEl.JSC();

What am I doing wrong here?

I am trying to create a card game using firestore data base. So i have 1 script.js file which i bundled into 1 bundle.js file and also have 2 HTML files, one for main lobby and one for players table. So html page with lobby works fine, but html with table throws errors one after another like whole code would be incorrect. It says something about bundle.js but i dont understand what the problem is. Please help.text

I dont know what to do.