I am getting a buffer error when using a Typescript RPC library in Vite, Vue

I am using a typescript library that does RPC calls for a blockchain. I am trying to use it in my Javascript and Vue project with Vite bundler.

I have tried install polyfills, buffer etc but somehow I still get the error mentioned below.

This is the library : https://github.com/VerusCoin/verusd-rpc-ts-client

vdxf.js:11 Uncaught ReferenceError: Buffer is not defined
    at node_modules/verus-typescript-primitives/dist/constants/vdxf.js (vdxf.js:11:59)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/index.js (index.js:20:16)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/classes/Challenge.js (Challenge.js:4:13)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
    at node_modules/verus-typescript-primitives/dist/vdxf/classes/index.js (index.js:4:19)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
    at node_modules/verus-typescript-primitives/dist/index.js (index.js:22:14)
    at __require (chunk-BUSYA2B4.js?v=8da589e3:3:50)
node_modules/verus-typescript-primitives/dist/constants/vdxf.js @ vdxf.js:11
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verus-typescript-primitives/dist/vdxf/index.js @ index.js:20
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verus-typescript-primitives/dist/vdxf/classes/Challenge.js @ Challenge.js:4
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verus-typescript-primitives/dist/vdxf/classes/index.js @ index.js:4
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verus-typescript-primitives/dist/index.js @ index.js:22
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verusd-rpc-ts-client/lib/VerusdRpcInterface.js @ VerusdRpcInterface.js:16
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
node_modules/verusd-rpc-ts-client/lib/index.js @ index.js:30
__require @ chunk-BUSYA2B4.js?v=8da589e3:3
(anonymous) @ index.js:33
Show 8 more frames
Show less

Rails 7.1.3 – my javascript function is not found when invoking window.onload on page load

I have an application on Rails 7.1.3.4, upgraded from Rails 6. I am in the process of converting to using import maps for Javascript that the application uses. I am not using Turbo and Stimulus in this application. On one of my pages I invoke window.onload to run a javascript function residing in one of my javascript files. When I run the page, I get an error in the console saying that the function is not defined. I checked and the javascript file is loaded in the page, so I think that I’m defining my import maps and imports properly. I cannot figure out why the function cannot be accessed. Any help appreciated!

Here’s the error message that I get in the console when the page is loaded:

Uncaught ReferenceError: setConfPicksDsply is not defined
at window.onload (edit:2163:28)

Here’s the relevant code in the view(it’s at the end of the view file):

</div>
<%= javascript_tag "window.onload = function(){setConfPicksDsply();}" %>
<% end %>

The function setConfPicksDsply() resides in the file confnosprdpicks.js:

function setConfPicksDsply() {  
    // console.log("entering setConfPicksDsply()");
    set_page_info_dialog("info_button");
    setConfidencePoolSchedDsply();
    set_picks_dsply();
    set_sched_pnts_picked();
    var nTimeToNextGame = time_to_next_game();
    // console.log(nTimeToNextGame);
;   if (nTimeToNextGame > 0)
        {
            // console.log("about to call setTimeout");
            setTimeout(gm_expiration_confidence,time_adjusted_for_max_settimeout_val(nTimeToNextGame));
        }
}

The javascript file in the HTML is:

<link rel="modulepreload" href="/assets/confnosprdpicks-60401ca8e1ca41b15e45331a22235f5dae41ed4cf88beda020a167403337da36.js">

and I can see that the function is in the file when I open it. Any ideas on how I can get the function to be recognized and run? Thanks!

Nesting two functions — syntax issue or improper code?

I have two functions that I’m trying to combine but having issues with it properly rendering and (more importantly) functioning as expected on the page. I suspect it’s a syntax issue, but I’m new to coding so I could very well be making a newbie mistake.

Fyi – function1 is displaying/working as expected by itself on page1. Function2 is working displaying as expected on page 2 when I have just that function within the script tag(s) and separately have the input tags below within the head/body tags. The issue I’m encountering is when I try to combine [i.e.- nest]the 2 functions on a single page while also pulling the input tags from function2 into the innerHTML of the newly-nested function(s).

Currently, a user can enter an address into the addy2 field and it will auto-complete via an integrated API call (which works perfectly on it’s own/as is); my goal is to retain the auto-complete functionality but also give the user the option to click either radio button 1 or radio button 2 and have either the 1st address or the 2nd address (respectively) populate in the addy2 text field. Is this possible to do?!?

function numeroUno() {
    const {
        addy1: e,
        addy2: t
    } = appState;
    document.getElementById("content").innerHTML = `n    <h1>Title Placeholder</h1>n    <div>n      <label for="addy1">Address 1</label>n      <input type="text" id="addy1" value="${e}" required>n    </div>n    <div>n      <label for="addy2">Address 2</label>n      <input type="text" id="addy2" value="${t}" required>n    </div>n    <button id="calc-btn">Calculate</button>n  `, initAutocomplete()({
    calcBtn: calcDist
    })
}


function numeroDos(radioButtonId, textFieldId, textToPopulate) {
  // Get the radio button and text field elements
  const radioButton = document.getElementById(radioButtonId);
  const textField = document.getElementById(textFieldId);

  // Select the radio button
  radioButton.checked = true;

  // Populate the text field
  textField.value = textToPopulate;
  document.getElementById("content").innerHTML = `n    <div class="mb-4">n     <input type="text" id="addy1">n     <input type="radio" id="radio1" name="myRadio" onclick="numeroDos('radio1', 'addy1', '123 address st, City, ST, Zip')">n    <label for="radio1">Radio 1</label>n    <input type="radio" id="radio2" name="myRadio" onclick="numeroDos('radio2', 'addy1', '456 address st, City, ST, Zip')">n    <label for="radio2">Radio 2</label>n    </div>n  ` 
}

Hope that all makes sense. Thank you in advance for any/all help!

Elegant way to use a big Promise.all?

I am working on a game and I have a spot in the code where I load all the resources in parallel. Currently it looks something like this:

let [
    grassTexture,
    stoneTexture,
    waterTexture,
    skyTexture,
    sandTexture,
    woodTexture,
    carpetTexture,
    paperTexture,
    steelTexture
] = await Promise.all([
    loadGrassTexture(),
    loadStoneTexture(),
    loadWaterTexture(),
    loadSkyTexture(),
    loadSandTexture(),
    loadWoodTexture(),
    loadCarpetTexture(),
    loadPaperTexture(),
    loadSteelTexture()
])

but that doesn’t strike me as particularly well-designed since it’s easy to mess up the order and it would be better if the result was on the same line with the respective function call. Another option I see is this:

let grassTexture = loadGrassTexture()
let stoneTexture = loadStoneTexture()
let waterTexture = loadWaterTexture()
let skyTexture = loadSkyTexture()
let sandTexture = loadSandTexture()
let woodTexture = loadWoodTexture()
let carpetTexture = loadCarpetTexture()
let paperTexture = loadPaperTexture()
let steelTexture = loadSteelTexture()

await grassTexture
await stoneTexture
await waterTexture
await skyTexture
await sandTexture
await woodTexture
await carpetTexture
await paperTexture
await steelTexture

but that’s not much better. Is there some idiomatic way to do this?

how to import THREE.InfiniteGridHelper

When attempting to use THREE.InfiniteGridHelper there doesn’t seem to be a way to import the code that doesn’t generate an error. Even copying and pasting the code does not work.

Currently I have the code copied and pasted into my main.js page and this gives the error it gives

Uncaught TypeError: “InfiniteGridHelper” is read-only
http://127.0.0.1:5000/static/main.js:10

I have also tried pasting the code into its own InfiniteGridHelper.js page to be run locally , importing the code from https://mevedia.com/share/InfiniteGridHelper.js?c, import maps, and using a regular script tag. the results tend to cycle between errors like

Uncaught TypeError: THREE.InfiniteGridHelper is not a constructor
http://127.0.0.1:5000/static/main.js:142

“SyntaxError: import declarations may only appear at top level of a module”

Uncaught SyntaxError: The requested module ‘http://127.0.0.1:5000/static/InfiniteGridHelper.js’ doesn’t provide an export named: ‘InfiniteGridHelper’

Uncaught ReferenceError: THREE is not defined
http://127.0.0.1:5000/static/InfiniteGridHelper.js:3

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://mevedia.com/share/InfiniteGridHelper.js?c. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

There is a forum on this library that seems to have been abandoned but it looks like other people were able to get it to work and it also seems to work on codepen. I’m just not able to figure out a way to get it to run locally.

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Author: Fyrestar https://mevedia.com (https://github.com/Fyrestar/THREE.InfiniteGridHelper)


THREE.InfiniteGridHelper = function InfiniteGridHelper( size1, size2, color, distance, axes = 'xzy' ) {

    color = color || new THREE.Color( 'white' );
    size1 = size1 || 10;
    size2 = size2 || 100;

    distance = distance || 8000;



    const planeAxes = axes.substr( 0, 2 );

    const geometry = new THREE.PlaneBufferGeometry( 2, 2, 1, 1 );

    const material = new THREE.ShaderMaterial( {

        side: THREE.DoubleSide,

        uniforms: {
            uSize1: {
                value: size1
            },
            uSize2: {
                value: size2
            },
            uColor: {
                value: color
            },
            uDistance: {
                value: distance
            }
        },
        transparent: true,
        vertexShader: `
           
           varying vec3 worldPosition;
           
           uniform float uDistance;
           
           void main() {
           
                vec3 pos = position.${axes} * uDistance;
                pos.${planeAxes} += cameraPosition.${planeAxes};
                
                worldPosition = pos;
                
                gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
           
           }
           `,


        fragmentShader: `
           
           varying vec3 worldPosition;
           
           uniform float uSize1;
           uniform float uSize2;
           uniform vec3 uColor;
           uniform float uDistance;
            
            
            
            float getGrid(float size) {
            
                vec2 r = worldPosition.${planeAxes} / size;
                
                
                vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
                float line = min(grid.x, grid.y);
                
            
                return 1.0 - min(line, 1.0);
            }
            
           void main() {
           
                
                  float d = 1.0 - min(distance(cameraPosition.${planeAxes}, worldPosition.${planeAxes}) / uDistance, 1.0);
                
                  float g1 = getGrid(uSize1);
                  float g2 = getGrid(uSize2);
                  
                  
                  gl_FragColor = vec4(uColor.rgb, mix(g2, g1, g1) * pow(d, 3.0));
                  gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
                
                  if ( gl_FragColor.a <= 0.0 ) discard;
                
           
           }
           
           `,

        extensions: {
            derivatives: true
        }

    } );


    THREE.Mesh.call( this, geometry, material );

    this.frustumCulled = false;

};

THREE.InfiniteGridHelper.prototype = {
    ...THREE.Mesh.prototype,
    ...THREE.Object3D.prototype,
    ...THREE.EventDispatcher.prototype
};

if ( parseInt( THREE.REVISION ) > 126 ) {

    class InfiniteGridHelper extends THREE.Mesh {

        constructor ( size1, size2, color, distance, axes = 'xzy' ) {


            color = color || new THREE.Color( 'white' );
            size1 = size1 || 10;
            size2 = size2 || 100;

            distance = distance || 8000;



            const planeAxes = axes.substr( 0, 2 );

            const geometry = new THREE.PlaneBufferGeometry( 2, 2, 1, 1 );

            const material = new THREE.ShaderMaterial( {

                side: THREE.DoubleSide,

                uniforms: {
                    uSize1: {
                        value: size1
                    },
                    uSize2: {
                        value: size2
                    },
                    uColor: {
                        value: color
                    },
                    uDistance: {
                        value: distance
                    }
                },
                transparent: true,
                vertexShader: `
           
           varying vec3 worldPosition;
           
           uniform float uDistance;
           
           void main() {
           
                vec3 pos = position.${axes} * uDistance;
                pos.${planeAxes} += cameraPosition.${planeAxes};
                
                worldPosition = pos;
                
                gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
           
           }
           `,


                fragmentShader: `
           
           varying vec3 worldPosition;
           
           uniform float uSize1;
           uniform float uSize2;
           uniform vec3 uColor;
           uniform float uDistance;
            
            
            
            float getGrid(float size) {
            
                vec2 r = worldPosition.${planeAxes} / size;
                
                
                vec2 grid = abs(fract(r - 0.5) - 0.5) / fwidth(r);
                float line = min(grid.x, grid.y);
                
            
                return 1.0 - min(line, 1.0);
            }
            
           void main() {
           
                
                  float d = 1.0 - min(distance(cameraPosition.${planeAxes}, worldPosition.${planeAxes}) / uDistance, 1.0);
                
                  float g1 = getGrid(uSize1);
                  float g2 = getGrid(uSize2);
                  
                  
                  gl_FragColor = vec4(uColor.rgb, mix(g2, g1, g1) * pow(d, 3.0));
                  gl_FragColor.a = mix(0.5 * gl_FragColor.a, gl_FragColor.a, g2);
                
                  if ( gl_FragColor.a <= 0.0 ) discard;
                
           
           }
           
           `,

                extensions: {
                    derivatives: true
                }

            } );

            super( geometry, material );

            this.frustumCulled = false;

        }

    }
    
    Object.assign( InfiniteGridHelper.prototype, THREE.InfiniteGridHelper.prototype );

    THREE.InfiniteGridHelper = InfiniteGridHelper;

}


// creating the scene

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / 
    window.innerHeight, 0.1, 1000);
    camera.position.set(0,0,5);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize',function(){
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setSize(width, height);
    camera.aspect=window.innerWidth/ window.innerHeight;
    camera.updateProjectionMatrix();
})

const controls = new OrbitControls( camera, renderer.domElement );
controls.update()


// Infinite Grid Helper
const gridHelper = new THREE.InfiniteGridHelper(10, 100);
scene.add(gridHelper);
scene.add( gridHelper );

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

function animate() {
    requestAnimationFrame(animate);

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

    renderer.render(scene, camera);
    controls.update()
}

animate();
<!DOCTYPE html>
<html>
<head>
    <title>Three.js Scene</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
        <script type="importmap"> { "imports": 
            { "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js", 
            "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"}} 
        </script>
        <script type="module" src="static/main.js"></script>

</body>
</html>

How can I observe a google translate DOM change?

I´m working around the google translate react bug, I’ve deactivated the translation in the HTML so it doesnt crash but I want to let know the user that Google Translate is not available on this page.

I´m setting this observer: ` useEffect(() => {
const targetNode = document.documentElement;
const config = { childList: true, subtree: true };

const callback = mutationList => {
  for (const mutation of mutationList) {
    if (mutation.type === 'childList') {
      toast.warning('Google Translate cannot be used in this page');
    }
  }
};
const observer = new MutationObserver(callback);
observer.observe(targetNode, config);
observer.disconnect();

});`

But its triggering with al the changes in the DOM, how can I only get the google translate change if its at all possible?

Echarts endLabel doesn’t clip on zoom

With Echarts, I dont know how clip the endLabel when I do zoom in the line and move at top or bottom, the endLabel should be clipped like the series is clipped.

With Echarts, I dont know how clip the endLabel when I do zoom in the line and move at top or bottom, the endLabel should be clipped like the series is clipped.

exemple: screenshot of the label issue

is there an option for that ?

// prettier-ignore
const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
option = {
    
  dataZoom: [
    {
      type: 'slider',
      yAxisIndex: 0,
      filterMode: 'none'
    
    }
  ],
  // Make gradient line here
  visualMap: [
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
    {
      show: false,
      type: 'continuous',
      seriesIndex: 1,
      dimension: 0,
      min: 0,
      max: dateList.length - 1
    }
  ],
  title: [
    {
      left: 'center',
      text: 'Gradient along the y axis'
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      data: dateList
    }
  ],
  yAxis: [
    {},
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '60%'
    }
  ],
  series: [
    {
      type: 'line',
      endLabel: {
        show: true,
        formatter: 'End Label of the serie-line'
      },
      showSymbol: false,
      data: valueList
    }
  ]
};

Here echarts the project
Here the sandbox project

Why Doesn’t Transition Animation Work in Nav and Div Elements [duplicate]

I Made a code to make a website that asks you to choose the language and go to the site, but the opacity animation with transition…

var Lang;


setTimeout(function() {
  document.getElementById("SelectLanguage-text").style.filter = "opacity(100%)";
  document.getElementById("SelectLanguage-text").style.top = "0";
  document.getElementsByClassName("EN")[0].style.display = "block";
  document.getElementsByClassName("AR")[0].style.display = "block";
}, 1000);
setTimeout(function() {
  document.getElementById("SelectLanguage-text-ar").style.filter = "opacity(100%)";
  document.getElementById("SelectLanguage-text-ar").style.top = "0";
  document.getElementsByClassName("EN")[0].style.filter = "opacity(100%)";
  document.getElementsByClassName("EN")[0].style.top = "0";
}, 1100);
setTimeout(function() {
  document.getElementsByClassName("AR")[0].style.filter = "opacity(100%)";
  document.getElementsByClassName("AR")[0].style.top = "0";
}, 1200);

document.getElementsByClassName("AR")[0].onclick = function() {
  Lang = "AR";
  Start();
}
document.getElementsByClassName("EN")[0].onclick = function() {
  Lang = "EN";
  Start();
}
document.getElementById("Switch").onclick = function() {
  if (Lang == "AR") {
    Lang = "EN";
    Start();
  } else {
    Lang = "AR";
    Start();
  }
}

document.getElementById("Return").onclick = function() {
  location.reload();
}

function Start() {
  document.getElementById("select-language").style.filter = "opacity(0%)";
  setTimeout(function() {
    document.getElementById("select-language").style.display = "none";
    document.getElementById("AllOtherSects").style.display = "block";
    document.getElementById("AllOtherSects").style.filter = "opacity(100%)";
    document.getElementById("AllOtherSects").style.top = "0";
    document.getElementsByTagName("nav")[0].style.display = "flex";
    document.getElementsByTagName("nav")[0].style.filter = "opacity(100%)";
  }, 500)

  if (Lang == "AR") {
    document.getElementsByTagName("nav")[0].style.direction = "rtl";
    document.getElementsByTagName("nav")[0].style.textAlign = "right";
    document.getElementsByTagName("h1")[0].innerHTML = "تعلم البرمجة";
    document.getElementsByTagName("h1")[0].style.fontFamily = "Arabic";
    document.getElementsByTagName("a")[0].innerHTML = "الرئيسية";
    document.getElementsByTagName("a")[1].innerHTML = "عن";
    document.getElementsByTagName("a")[2].innerHTML = "اتصل بنا";
    document.getElementsByTagName("h1")[3].innerHTML = "تعلم البرمجة";
    document.getElementById("OR").innerHTML = "أو";
    document.getElementById("Switch").innerHTML = "تبديل اللغة";
    document.getElementById("Return").innerHTML = "العودة للتحديد";
  } else {
    document.getElementsByTagName("nav")[0].style.direction = "ltr";
    document.getElementsByTagName("nav")[0].style.textAlign = "left";
    document.getElementsByTagName("h1")[0].innerHTML = "Learn Code";
    document.getElementsByTagName("h1")[0].style.fontFamily = "Title";
    document.getElementsByTagName("a")[0].innerHTML = "Home";
    document.getElementsByTagName("a")[1].innerHTML = "About";
    document.getElementsByTagName("a")[2].innerHTML = "Contact";
    document.getElementsByTagName("h1")[3].innerHTML = "Learn Code";
    document.getElementById("OR").innerHTML = "OR";
    document.getElementById("Switch").innerHTML = "Switch Language";
    document.getElementById("Return").innerHTML = "Return To Setup";
  }
}
@font-face {
  font-family: Title;
  src: url(Fonts/cream_beige/Cream Beige.ttf);
}

@font-face {
  font-family: Arabic;
  src: url(Fonts/Rubik/static/Rubik-Regular.ttf);
}

.Flex {
  display: flex;
}


/* to make every div with this class flex*/

* {
  transition: 0.5s;
  font-family: Rubik;
}

body {
  background-image: linear-gradient(rgba(0, 0, 0, 0.57), rgba(0, 0, 0, 0.57)), url("https://i.ytimg.com/vi/PIhVTAdmouw/maxresdefault.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  animation: BackgroundAnimation 20s infinite ease-in-out;
  color: white;
  margin: 0;
  padding: 0;
}

@keyframes BackgroundAnimation {
  0% {
    background-position: left;
  }
  50% {
    background-position: right;
  }
  100% {
    background-position: left;
  }
}

section {
  height: 100vh;
}

nav {
  padding: 20px;
  display: none;
  filter: opacity(0);
  align-items: center;
  position: fixed;
  width: 100%;
}

nav h1 {
  margin: 10px;
  font-size: xx-large;
  font-family: Title;
  font-weight: 100;
}

nav a {
  margin: 0 20px;
  font-size: 20px;
}

a {
  text-decoration: none;
  color: white;
}

#select-language {
  height: 97vh;
  width: 100%;
  text-align: center;
  align-content: center;
}

#SelectLanguage-text {
  margin-bottom: 0;
  position: relative;
  top: 30px;
  filter: opacity(0);
}

#SelectLanguage-text-ar {
  letter-spacing: 2px;
  margin-top: 0;
  position: relative;
  top: 30px;
  filter: opacity(0);
  font-family: Arabic;
}

#select-language button {
  background-color: rgba(0, 0, 0, 0.61);
  color: white;
  border: 10px white solid;
  padding: 20px 70px;
  font-size: large;
  margin: 20px;
}

#select-language button:hover {
  /*padding: 30px 100px;*/
  transform: scale(1.2);
}

.AR,
.EN {
  top: 30px;
  display: none;
  position: relative;
  filter: opacity(0);
}

#AllOtherSects {
  display: none;
  position: relative;
  filter: opacity(0);
  top: 30px
}

#S1 {
  color: white;
  text-align: center;
  align-content: center;
}

#S1 h1 {
  font-size: 100px;
}

.transparent {
  background-color: transparent;
  border: none;
  color: white;
  font-size: large;
  margin: 20px;
}

.transparent:hover {
  /*padding: 30px 100px;*/
  transform: scale(1.2);
}
<!DOCTYPE html>
<html>

<head>
  <title>Home</title>
  <link rel="stylesheet" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">

</head>

<body>
  <nav>
    <img src="Images/code-slash.svg" alt="">
    <h1>Learn Code</h1>
    <a href="Home.html">Home</a>
    <a href="About.html">About</a>
    <a href="Contact.html">Contact</a>
  </nav>
  <section id="select-language">
    <h1 style="font-size: 40px; font-weight: 300;" id="SelectLanguage-text">Select Language</h1>
    <h1 style="font-size: 40px; font-weight: 300;" id="SelectLanguage-text-ar">اختر اللغة</h1>
    <div class="Flex" style="justify-content: center; flex-wrap: wrap;">
      <button class="AR" onclick="">العربية</button>
      <button class="EN" onclick="">English</button>
    </div>
  </section>
  <div id="AllOtherSects">
    <section id="S1">
      <h1>The Coding</h1>
      <button id="Switch" class="transparent">Switch Language</button><label id="OR"> OR </label><button id="Return" class="transparent">Return To Setup</button>
    </section>
  </div>
  <script src="Script.js"></script>
</body>

</html>

You Will Notice That the body when you click on English Or العربية Appears Instantly Without An Opacity Animation. But It Works Only at the start.

I Tried To Replace The Opacity With Scale, So The code looks like this:

@font-face {
    font-family: Title;
    src: url(Fonts/cream_beige/Cream Beige.ttf);
}
@font-face {
    font-family: Arabic;
    src: url(Fonts/Rubik/static/Rubik-Regular.ttf);
}
.Flex {
    display: flex;
}
/* to make every div with this class flex*/
* {
    transition: 0.5s;
    font-family: Arabic;
}
body {
    background-image: linear-gradient(rgba(0, 0, 0, 0.57),rgba(0, 0, 0, 0.57)),url(Images/Background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    animation: BackgroundAnimation 20s infinite ease-in-out;
    color: white;
    margin: 0;
    padding: 0;
}
@keyframes BackgroundAnimation {
    0% {
        background-position: left;
    }
    50% {
        background-position: right;
    }
    100% {
        background-position: left;
    }
}
section {
    height: 100vh;
}
nav {
    padding: 20px;
    display: none;
    filter: opacity(0);
    align-items: center;
    position: fixed;
    width: 100%;
}
nav h1 {
    margin: 10px;
    font-size: xx-large;
    font-family: Title;
    font-weight: 100;
}
nav a {
    margin: 0 20px;
    font-size: 20px;
}
a {
    text-decoration: none;
    color: white;
}
#select-language {
    height: 97vh;
    width: 100%;
    text-align: center;
    align-content: center;
}
#SelectLanguage-text {
    margin-bottom: 0;
    position: relative;
    top: 30px;
    filter: opacity(0);
}
#SelectLanguage-text-ar {
    letter-spacing: 2px;
    margin-top: 0;
    position: relative;
    top: 30px;
    filter: opacity(0);
    font-family: Arabic;
}
#select-language button {
    background-color: rgba(0, 0, 0, 0.61);
    color: white;
    border: 10px white solid;
    padding: 20px 70px;
    font-size: large;
    margin: 20px;
}
#select-language button:hover {
    /*padding: 30px 100px;*/
    transform: scale(1.2);
}
.AR,.EN {
    top: 30px;
    display: none;
    position: relative;
    filter: opacity(0);
}
#AllOtherSects {
    display: none;
    position: relative;
    filter: opacity(0);
    top: 30px
}
#S1 {
    color: white;
    text-align: center;
    align-content: center;
}
#S1 h1 {
    font-size: 100px;
}
.transparent {
    background-color: transparent;
    border: none;
    color: white;
    font-size: large;
    margin: 20px;
}
.transparent:hover {
    /*padding: 30px 100px;*/
    transform: scale(1.2);
}
document.getElementById("select-language").style.transform = "scale(1)";
    setTimeout(function(){
    document.getElementById("select-language").style.display = "none"; 
    document.getElementById("AllOtherSects").style.display = "block";
    document.getElementById("AllOtherSects").style.transform = "scale(1)";
    document.getElementById("AllOtherSects").style.top = "0";   
    document.getElementsByTagName("nav")[0].style.display = "flex";
    document.getElementsByTagName("nav")[0].style.transform = "scale(1)";  
    },500)

But It Also Didn’t Work!

Problem with Using FormControl in Angular and PrimeNG Radio Buttons

Problem Description

In my Angular project, I’m using PrimeNG’s radio button component (p-radioButton) within my custom wrapper component (x-radio-button). This wrapper component implements the ControlValueAccessor interface.

Issue:
Everything works fine when using ngModel.
However, when I add a formControl, it correctly selects the default value, but when I select the other option, both radio buttons appear to be selected.

import { CommonModule } from '@angular/common';
import { FormsModule, NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
import { Component, EventEmitter, Input, Output, forwardRef } from '@angular/core';
import { RadioButtonModule } from 'primeng/radiobutton';

@Component({
   selector: 'x-radio-button',
   standalone: true,
   imports: [CommonModule, FormsModule, RadioButtonModule],
   templateUrl: './radio-button.component.html',
   styleUrls: ['./radio-button.component.scss'],
   providers: [
       {
           provide: NG_VALUE_ACCESSOR,
           useExisting: forwardRef(() => RadioButtonComponent),
           multi: true,
       },
   ],
})
export class RadioButtonComponent implements ControlValueAccessor {
   @Input() name: string;
   @Input() value: any;
   @Input() label: string;
   @Input() inputId: string;
   @Output() select = new EventEmitter<any>();

   checked: boolean = false;

   public _internalValue: any;

   onChange = (value: any) => {};
   onTouched = () => {};

   // Value accessor interface
   writeValue(value: any): void {
       this._internalValue = value;
       this.checked = this._internalValue === this.value;
   }

   registerOnChange(fn: any): void {
       this.onChange = fn;
   }

   registerOnTouched(fn: any): void {
       this.onTouched = fn;
   }

   setDisabledState(isDisabled: boolean): void {
       // Implement if necessary for disabled state
   }

   onRadioChange(): void {
       this.checked = true;
       this.onChange(this.value);
       this.select.emit(this.value);
   }
}
<p-radioButton
    [name]="name"
    [value]="value"
    [(ngModel)]="_internalValue"
    [inputId]="inputId"
    (ngModelChange)="onRadioChange()">
</p-radioButton>

<label class="ml-2">{{ label }}</label>

Usage Scenario

<div>
   <x-radio-button
       [inputId]="'2'"
       [value]="'http'"
       formControlName="protocol">
   </x-radio-button>
   <x-radio-button
       [inputId]="'1'"
       [value]="'https'"
       formControlName="protocol">
   </x-radio-button>
</div>



this.parentForm.addControl(
   'protocol',
   new UntypedFormControl('http', Validators.required),
);

Expected Behavior

I expect only one of the radio buttons to be selected. When using the FormControl, I want the other button to automatically be disabled when one button is selected.
Help Needed

How can I fix this issue? I’m open to suggestions.

Autoplaying Keen Slider Carousel jumps horizontally on initial mobile scroll

I have a autoplaying, continuously looping and click/draggable carousel I’ve created using Keen Slider.

This works well, however on mobile the carousel content jumps horizontally when I scroll down the page. This only occurs on the first scroll and is fine after. Tested on iPhone 15 Pro in Safari and Chrome, same result in each.

After some research it looks as though this is in relation to the origin recalculating as the viewport resizes. You can actually see this on desktop if you shrink/enlarge your browser horizontally. The content jumps, which I don’t mind. But on mobile I think this looks like a bug as it’s just a page scroll – but I imagine caused by the dynamic resizing of the URL bar.

Slides/Origin Doc: https://keen-slider.io/docs#slides-object–number–function–null

I’ve included a code example, where you can see the jump/shift on desktop if you resize your browser. I know my issue is on mobile but hopefully this helps to see the issue and test.

I’m not sure if disabling this is the correct approach but basically I don’t want the content to realign to the left edge (or centre, which is another option) on resize.

I’d really appreciate some help and ideas on the best way to resolve this issue – or at least make it more deliberate.

/* Lazy Load Effect */

const pixelImage = document.querySelectorAll(".pixel-load")

pixelImage.forEach(div => {
    const img = div.querySelector("img")

    function loaded() {
        div.classList.add("loaded")
    }

    if (img.complete) {
        loaded()
    } else {
        img.addEventListener("load", loaded)
    }
})


/* Keen Slider */

var animation = { duration: 40000, easing: (t) => t }
new KeenSlider("#gallery-slider", {
    loop: true,
    mode: "free",
    slides: {
        perView: 1.5,
        renderMode: "precision",
        spacing: 8
    },
    breakpoints: {
        '(min-width: 768px)': {
            slides: {
                perView: 3,
                spacing: 8
            }
        },
        '(min-width: 1024px)': {
            slides: {
                perView: 4,
                spacing: 8
            }
        }
    },
    created(s) {
        document.getElementById("gallery-slider").classList.add("loaded");
        s.moveToIdx(4, true, animation);
    },
    updated(s) {
        s.moveToIdx(s.track.details.abs + 4, true, animation);
    },
    animationEnded(s) {
        s.moveToIdx(s.track.details.abs + 4, true, animation);
    }
})
/* ==========================================================================
   #BASE
   ========================================================================== */

html {
  font-size: 62.5%;
  margin: 0;
  padding: 0;
}

body {
  font-size: 12px;
  font-family: "Arial", sans-serif;
  margin: 0;
  padding: 64px 0 0;
  text-transform: uppercase;
}

h2 {
  font-size: 12px;
  font-weight: 400;
  margin: 0 16px 16px;
  padding: 0;
}

figure {
  margin: 0;
  padding: 0;
}

img {
  height: auto;
  width: 100%;
  max-width: 100%;
}


/* ==========================================================================
   #KEEN SLIDER
   ========================================================================== */

.keen-slider {
    display: flex;
    align-content: flex-start;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    user-select: none;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

.keen-slider .keen-slider__slide {
    min-height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}


/* ==========================================================================
   #GALLERY
   ========================================================================== */


/**
 * My overrides for the Keen Slider gallery.
 *
 * 1. Remove `overflow: hidden` from the slider and add it to the parent. This
 *    allows the slider to align with the grid but also bleed off the edges of
 *    the page.
 * 2. Align container with the global grid.
 */

.gallery {
  margin-bottom: 64px;
  overflow: hidden; /* [1] */
  padding: 0 16px; /* [2] */
}

.gallery .keen-slider {
  overflow: visible; /* [1] */
}


/**
 * As the widths for each slide are set in Javascript. We add widths to slides
 * before `.keen-slider` has loaded to keep the layout consistent and help with
 * the Cumulative Layout Shift (CLS) and performance.
 */

.keen-slider:not(.loaded) .keen-slider__slide {
  width: calc((100vw / 1.5) - 24px);
}

@media(min-width: 48em) {
  .keen-slider:not(.loaded) .keen-slider__slide {
    width: calc((100vw - 48px) / 3);
  }
}

@media(min-width: 64rem) {
  .keen-slider:not(.loaded) .keen-slider__slide {
    width: calc((100vw - 56px) / 4);
  }
}


/* ==========================================================================
   #PIXEL LOAD
   ========================================================================== */


/**
 * Add a pixelated effect to images while the load.
 */

.pixel-load {
  overflow: hidden;
  position: relative;
}

.pixel-load__preload img {
  image-rendering: pixelated;
    position: absolute;
    inset: 0;
    opacity: 1;
    pointer-events: none;
}

.loaded .pixel-load__preload img {
  animation: loaded .32s .16s steps(1, end) both;
}

@keyframes loaded {
  0%      {scale: 2;}
  33%     {scale: 1.5;}
  66%     {scale: 1;}
  100%    {opacity: 0; z-index: 1;}
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/keen-slider.min.js"></script>
<!-- Keen Slider -->
<div class="gallery">
  <div id="gallery-slider" class="keen-slider">
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 1" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 1</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 2" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 2</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 3" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 3</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 4" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 4</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 5" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 5</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 6" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 6</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 7" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 7</figcaption>
      </figure>
    </div>
    <div class="keen-slider__slide">
      <figure data-label="Hover Label 8" class="has-label">
        <div class="pixel-load">
          <div class="pixel-load__preload">
            <img src="https://placebeard.it/18/24" width="18" height="24" loading="eager">
          </div>
          <img src="https://placebeard.it/768/1024" width="768" height="1024" loading="lazy" />
        </div>
        <figcaption>Slide 8</figcaption>
      </figure>
    </div>
  </div>
</div>
<!-- End Keen Slider -->

running code gives file location only JavaScript

So this is my first time programming, I’m trying to create a scraper that pulls text, I’m trying to follow along with a YouTube video but I’m getting different results, when running my code it only gives this:

PS C:Usersbasje> & 'g:codingvs codefilesDiscord Gta Botscrapers.js'

which is just the file location of the file.
i ran the code by clicking the 3 dots on the terminal and pressing “Run Active File”
i did import puppeteer and made an empty packaged json
here are the code and YouTube video for reference

const puppeteer = require('puppeteer');

async function scrapeProduct(url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage()
    await page.goto(url)

    const[el] = await page.$x('//*[@id="productTitle"]')
    const txt = await el.getProperty('textContent');
    const rawTxt = await txt.JsonValue();

    console.log({srcTxt, rawTxt});


}

scrapeProduct('https://www.amazon.nl/SKYLEO-Bureaulamp-Aanraakbediening-helderheidsniveaus-          
geheugenfunctie/dp/B0CG17QTVS?ref_=ast_slp_dp&th=1&psc=1'); 

https://www.youtube.com/watch?v=TzZ3YOUhCxo

Div not showing after select

For some reason, I can display boxes and all, but everytime I try to display a DIV after a select has been chosen, nothing happens… Please advice.

JS:

$(document).ready(function () {
            var divs = document.getElementById('showRef');
            divs.style.display = 'none';
            $('.selRef').on('change', function () {

                var refValid = (this.value == "Yes");
                $(txtWeek).prop('required', refValid);
                if (refValid) {
                    divs.style.display = 'block';
                }
                else {
                    divs.style.display = 'none';
                }
            })
        });

ASP:

                                    <div class="col-md-12">
                                        <div class="input-group">
                                            <select id='selRef'
                                            required runat="server" clientidmode="Static" class="form-control selRef">
                                            <option value="No" selected>No</option>
                                            <option value="Yes">Yes</option>
                                        </select>
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <div id="showRef" runat="server">
                            <div class="row mt-3">
                    ....

Everytime I click or change the dropdownvalue, nothing happens…

Check if can scroll to end of page

I have several div boxes on a page. I want to check to see if I can scroll to the end of the page. There was a bug yesterday on the website where the user couldn’t scroll to the end of the page. How can I check this using playwright?

FATAL ERROR: Javascript run out of heapMemory while install modules using yarn

i am running the react native app. It was good till yesterday, but today i am getting the error as below, while I am trying to install the modules listed in the package.json using the
yarn install command, not sure what is happening, but if i upgrade the yarn to berry version it works though, but unable to install the app, though i was able to install the modules. not sure what is happening:

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
----- Native stack trace -----

 1: 0x1001a7eb8 node::OOMErrorHandler(char const*, v8::OOMDetails const&) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 2: 0x10033662c v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, v8::OOMDetails const&) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 3: 0x10050ad00 v8::internal::Heap::GarbageCollectionReasonToString(v8::internal::GarbageCollectionReason) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 4: 0x1005097dc v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 5: 0x1004ffff4 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 6: 0x100500854 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 7: 0x1004e58c4 v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 8: 0x1008cd5d4 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
 9: 0x100c2cc44 Builtins_CEntry_Return1_ArgvOnStack_NoBuiltinExit [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
10: 0x100c48664 Builtins_ArrayPrototypeJoin [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
11: 0x105fee3d4 
12: 0x105ff7d04 
13: 0x105fdc654 
14: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
15: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
16: 0x100bdd4c4 Builtins_GeneratorPrototypeNext [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
17: 0x105f50610 
18: 0x105ddeb2c 
19: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
20: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
21: 0x100bdd4c4 Builtins_GeneratorPrototypeNext [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
22: 0x105f50610 
23: 0x105ddeb2c 
24: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
25: 0x100ba43e4 Builtins_InterpreterEntryTrampoline [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
26: 0x100bdd4c4 Builtins_GeneratorPrototypeNext [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
27: 0x105f65944 
28: 0x100c88fb8 Builtins_PromiseFulfillReactionJob [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
29: 0x100bcab94 Builtins_RunMicrotasks [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
30: 0x100ba23f4 Builtins_JSRunMicrotasksEntry [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
31: 0x100478180 v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
32: 0x10047866c v8::internal::(anonymous namespace)::InvokeWithTryCatch(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
33: 0x100478848 v8::internal::Execution::TryRunMicrotasks(v8::internal::Isolate*, v8::internal::MicrotaskQueue*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
34: 0x10049fa14 v8::internal::MicrotaskQueue::RunMicrotasks(v8::internal::Isolate*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
35: 0x1004a01b0 v8::internal::MicrotaskQueue::PerformCheckpoint(v8::Isolate*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
36: 0x1000d0c4c node::InternalCallbackScope::Close() [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
37: 0x1000d0fe4 node::InternalMakeCallback(node::Environment*, v8::Local<v8::Object>, v8::Local<v8::Object>, v8::Local<v8::Function>, int, v8::Local<v8::Value>*, node::async_context) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
38: 0x1000e7070 node::AsyncWrap::MakeCallback(v8::Local<v8::Function>, int, v8::Local<v8::Value>*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
39: 0x1001ad2f0 node::fs::FSReqCallback::Reject(v8::Local<v8::Value>) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
40: 0x1001adb9c node::fs::FSReqAfterScope::Reject(uv_fs_s*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
41: 0x1001addc0 node::fs::AfterNoArgs(uv_fs_s*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
42: 0x1001a1d44 node::MakeLibuvRequestCallback<uv_fs_s, void (*)(uv_fs_s*)>::Wrapper(uv_fs_s*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
43: 0x100b7e0e0 uv__work_done [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
44: 0x100b81b30 uv__async_io [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
45: 0x100b93c08 uv__io_poll [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
46: 0x100b820f4 uv_run [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
47: 0x1000d16f0 node::SpinEventLoopInternal(node::Environment*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
48: 0x1001e7b64 node::NodeMainInstance::Run(node::ExitCode*, node::Environment*) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
49: 0x1001e7878 node::NodeMainInstance::Run() [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
50: 0x10016f654 node::Start(int, char**) [/Users/riktam/.nvm/versions/node/v20.18.0/bin/node]
51: 0x194084274 start [/usr/lib/dyld]
zsh: abort      yarn install