Category: javascript

In a vue app, I would like to place content from an array in one of two columns, the column that has the lowest view height. So that if there is “one” and “two” in the left one, then “three” would get put into the column2, and then four would get put into column2 as well.

Right now, getHeight is only running once, after the v-for has rendered everything.

TEMPLATE

<div>
  <div class="container flex">
  <div class="column" ref="column1">

    <div v-for="e in ['one', 'two', 'three', 'four']" 
:key="e">
      <div v-if="getHeight">
        <div>{{e}}</div>
      </div>
    </div>
  </div>
  <div class="column" ref="column2">

    <div v-for="e in ['one', 'two', 'three', 'four']" 
:key="e">
      <div v-if="!getHeight">
        <div>{{e}}</div>
      </div>
    </div>
   </div>
 </div>
</div>

SCRIPT

 const getHeight = computed(() => {
 
  if (!column1.value && !column2.value) {
    return false;
  }
  
  if (column1.value.offsetHeight <= 
 column2.value.offsetHeight) {
  
    return true;
  } else {
    return false;
  }
 };

CSS

.container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
}

.column {
  flex: 1;
 flex: 1 1 auto;
 overflow-y: auto;
}

I’m working on a project with a Next.js frontend located in a client directory and a Node.js backend in a server directory. The project structure looks something like this:

jukerabbit/
├─ client/
│  ├─ pages/
│  ├─ components/
│  ├─ tailwind.config.ts
│  └─ ...
└─ server/
   ├─ server.ts
   └─ ...

I’m starting my Next.js application from a Node.js script located in the server directory (server/server.ts). When I start the Next app directly from the client directory using next dev, Tailwind CSS works perfectly, and my styles are applied as expected.

However, when I start the Next.js app through my Node.js script, I receive warnings indicating that Tailwind can’t find my content sources:

warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration

Here’s a simplified version of how I’m starting the Next app from my server.ts:

const express = require('express');
const next = require('next');
const path = require('path');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev, dir: path.join(__dirname, '../client') });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  const server = express();

  server.get('*', (req, res) => {
    return handle(req, res);
  });

  const PORT = process.env.PORT || 3000;
  server.listen(PORT, () => {
    console.log(`> Ready on http://localhost:${PORT}`);
  });
});

And here’s my tailwind.config.ts in the client directory:

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  // other Tailwind config...
};

I suspect the issue is related to how paths are resolved when the Next app is started from the server directory, but I’m unsure how to fix this. I actually did find the warning was suppressed by changing the content path to just ./**.*.{js,ts,jsx,tsx}, but it still didn’t build the css.

I realize starting a Next server through Node like this is slightly unorthodox, so I’m having trouble finding relevant threads. Actually launching Next works fine — I’m just stuck on getting Tailwind to build. Any insight would be very much appreciated. Thanks!

I use the click function and want to get the value outside the click function.

$("#set").click(() => {
  var dataValue = $('#click-data').find(":selected").val();
  //success
  alert(dataValue)
});

//failed - how to I put this value here?
//alert(dataValue)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="click-data">
  <option value="01">01</option>
  <option value="02">02</option>
</select>

<button id="set">Click</button>

Because I need to reuse that value in another function

I have a problem when the application is running I need to press the button once first, how can I make the button trigger without me needing to press it first, is there a certain function when the application opens to be auto triggered?

i want to integrate game center in my game.

i am use js an cordova. i am using

[https://github.com/CSchnackenberg/cordova-plugin-game-center](this plugin)

but when i tried to acces to achievements i can’t my game close and i don’t know why.

thinks.

• one or more functions are deprecated.
  i read that gameCenterController.viewState = GKGameCenterViewControllerStateAchievements; is deprecated.
• i don’t setup my game correctly in game center.

steps that i made.

i go to appstoreconnect, then go to my app and then go to services tab thebn game center.
i configured my achievements but my achievements are no publick.

i checked game center check in app information and added game center in capabilities in signings & capabilities in xcode.
so when i released my app in test flight my game close when a player unlock an achievement or when player tap un achievements option.

What is the difference between a regular function and an arrow function in JavaScript, and in what scenarios would you choose to use one over the other?

sought Implementing a search function on an admin page can be done in several ways, depending on the specific requirements and structure of your page.

The URL.createObjectURL() function allows you to create a temporary URL from a Blob. I am aware that this function can leak memory (until the page is unloaded), so that it is often important to call the corresponding revokeObjectURL() function to free the memory, especially if you’re calling it in a loop. My question is not about such leaks, but instead about the memory overheads to createObjectURL() and the implications for when to call revokeObjectURL().

Most image Blobs would hold compressed data, which the browser of course needs to decompress in order to show the image. Does createObjectURL() create a thin wrapper around the Blob? Or does it decompress the image and then stores the full bitmap data until revokeObjectURL() is called? Or perhaps it makes its own immutable copy of the data so that changes to the Blob’s data don’t affect it? (Blobs are immutable so there’d be no reason to make a copy.)

In my case I’ll still be holding the Blob in memory, and so if createObjectURL() only makes a thin wrapper then I could keep the object URL in case I need to use it more than once. But if the overhead is high because it owns a large block of memory then I’d want to revoke it immediately after it’s used.

I’m currently using the Simple Git library in my Node.js project to get the diff of a specific file. However, when I use the git.diff([“–“], file) function, it returns the entire diff instead of the diff for the specific file. Here’s the code snippet:

GitControl.prototype.diff = async function (git, param, callback) {
  const file = param[0];
  console.log(file);
  try {
    const result = await git.diff(["--"], file);
    callback(null, JSON.stringify({ success: true, diffText: result }));
  } catch (err) {
    console.log(`GIT CONTROL DIFF ERROR OCCUR: ${err}`);
    callback(err, JSON.stringify({ success: false, error: err.message }));
  }
};

When I run the equivalent command in the terminal (git diff — bin/Source/MainView.js), it works as expected and returns the diff for the specified file.

I’ve confirmed that the file variable contains the correct file path (e.g., “bin/Source/View/qnaView.js”).

Is there a difference between the git diff — command in the terminal and the git.diff([“–“], file) function in Simple Git? If so, how can I modify my code to get the diff for a specific file?

I’m trying to use an Apps Script to create a custom function in Google Sheets. The function is meant to generate a HIIT/Tabata workout plan based on entered percentages for types of exercises (upper body, lower body and core; then various subtypes such as upper body > weights, upper body > pushup variations, etc.). There’s a worksheet in my Google sheet with the exercises and tags in columns.

I’m still working on the function, but I’m having an issue executing it. When I try to input something like the following into a Sheets cell to run the function, I get a “Formula parse error” with no further info:

=WPLAN(30, 5, [{workoutType: “Lower Body”, percentage: 60, tagPercentages: [{tag: “squats”, percentage: 60}, {tag: “lowimpact”, percentage: 40}]}, {workoutType: “Upper Body”, percentage: 40, tagPercentages: [{tag: “pushups”, percentage: 50}, {tag: “weights”, percentage: 50}]}])

Can Sheets accept JSON as a function parameter? I can make the function execute without the error if I enter:

=WPLAN(30, 5,workoutType)

Though of course the function itself fails because the input is wrong. Is there a workaround that will let me pass the JSON in?

I am trying to move the cube by clicking on it, however, the cube does not move unless I click 4 squares above it. This behavior is consistent throughout the scene.

For example, in the image below, I can only click and drag the left-bottom cube by clicking on the 2nd cube 4 spaces above it:

App.js

import React, { useState } from "react";
import ThreeScene from "./ThreeScene";

function App() {
  const [cubeCount, setCubeCount] = useState(0);
  const [isEditMode, setIsEditMode] = useState(true); // Start in edit mode

  const handleAddCube = () => {
    if (isEditMode) {
      setCubeCount(cubeCount + 1);
    }
  };

  const handleToggleEditMode = () => {
    setIsEditMode(!isEditMode);
  };

  return (
    <div className="App">
      <h2>Draggable Cube Placer</h2>
      <button onClick={handleToggleEditMode}>
        {isEditMode ? "Lock" : "Edit Mode"}
      </button>
      {isEditMode && <button onClick={handleAddCube}>Add Cube</button>}
      <ThreeScene cubeCount={cubeCount} isEditMode={isEditMode} />
    </div>
  );
}

export default App;

ThreeScene.js:

    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import React, { useEffect, useRef } from "react";
import * as THREE from "three";

const ThreeScene = ({ cubeCount, isEditMode }) => {
  const mountRef = useRef(null);
  const cubesRef = useRef([]);
  const sceneRef = useRef(new THREE.Scene());
  const cameraRef = useRef(
    new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    )
  );
  const rendererRef = useRef(new THREE.WebGLRenderer());
  const selectedCubeRef = useRef(null);
  const mouseRef = useRef(new THREE.Vector2());
  const raycasterRef = useRef(new THREE.Raycaster());
  const planeRef = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), -0.5));
  const offsetRef = useRef(new THREE.Vector3());
  const controlsRef = useRef(null); // Reference for OrbitControls

  useEffect(() => {
    const controls = new OrbitControls(
      cameraRef.current,
      rendererRef.current.domElement
    );
    controls.enablePan = true;
    controls.enableZoom = true;
    controlsRef.current = controls;
    // Disable controls if in edit mode
    controls.enabled = !isEditMode;

    return () => controls.dispose(); // Cleanup controls on component unmount
  }, [isEditMode]); // Reinitialize controls when isEditMode changes
  useEffect(() => {
    // Adjust camera position and OrbitControls based on edit mode
    if (isEditMode) {
      // Position camera to look from the top when in edit mode
      cameraRef.current.position.set(0, 20, 0);
      cameraRef.current.lookAt(sceneRef.current.position);
      if (controlsRef.current) {
        controlsRef.current.enabled = false;
      }
    } else {
      // Restore camera position when not in edit mode
      cameraRef.current.position.set(0, 5, 10);
      cameraRef.current.lookAt(sceneRef.current.position);
      if (controlsRef.current) {
        controlsRef.current.enabled = true;
      }
    }
    if (controlsRef.current) {
      controlsRef.current.update();
    }
  }, [isEditMode]);

  // Event Handlers
  const onMouseMove = (event) => {
    event.preventDefault();
    if (!selectedCubeRef.current) return;

    mouseRef.current.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouseRef.current.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycasterRef.current.setFromCamera(mouseRef.current, cameraRef.current);

    const intersect = raycasterRef.current.ray.intersectPlane(
      planeRef.current,
      new THREE.Vector3()
    );
    if (intersect) {
      selectedCubeRef.current.position.set(
        intersect.x + offsetRef.current.x,
        selectedCubeRef.current.position.y,
        intersect.z + offsetRef.current.z
      );
    }
  };

  const onMouseDown = (event) => {
    event.preventDefault();
    mouseRef.current.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouseRef.current.y = -(event.clientY / window.innerHeight) * 2 + 1;
    raycasterRef.current.setFromCamera(mouseRef.current, cameraRef.current);

    const intersects = raycasterRef.current.intersectObjects(
      cubesRef.current,
      true
    );
    console.log(intersects);
    if (intersects.length > 0) {
      selectedCubeRef.current = intersects[0].object;
      selectedCubeRef.current.material.opacity = 0.5;

      console.log("Cube clicked:", selectedCubeRef.current);

      const intersect = raycasterRef.current.ray.intersectPlane(
        planeRef.current,
        new THREE.Vector3()
      );
      if (intersect) {
        offsetRef.current.subVectors(
          selectedCubeRef.current.position,
          intersect
        );
        document.addEventListener("mousemove", onMouseMove);
        document.addEventListener("mouseup", onMouseUp);
      }
    } else {
      console.log("No cube clicked");
    }
  };

  const onMouseUp = (event) => {
    if (selectedCubeRef.current) {
      selectedCubeRef.current.position.x =
        Math.round(selectedCubeRef.current.position.x / 0.5) * 0.5;
      selectedCubeRef.current.position.z =
        Math.round(selectedCubeRef.current.position.z / 0.5) * 0.5;
      selectedCubeRef.current.material.opacity = 1;
    }
    selectedCubeRef.current = null;
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  };

  // Setup scene, camera, and renderer
  useEffect(() => {
    cameraRef.current.position.set(0, 5, 10);
    rendererRef.current.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(rendererRef.current.domElement);
    sceneRef.current.add(new THREE.GridHelper(10, 10));

    const animate = () => {
      requestAnimationFrame(animate);
      rendererRef.current.render(sceneRef.current, cameraRef.current);
    };

    animate();

    return () => {
      mountRef.current.removeChild(rendererRef.current.domElement);
    };
  }, []);

  // Add or remove cubes when cubeCount changes
  useEffect(() => {
    const updateCubes = () => {
      while (cubesRef.current.length < cubeCount) {
        const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        const cubeMaterial = new THREE.MeshBasicMaterial({
          color: 808080,
          transparent: false,
          opacity: 1.0,
          wireframe: false,
        });
        const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        cube.position.set(0, 0.5, 0);
        sceneRef.current.add(cube);
        cubesRef.current.push(cube);
      }
    };

    updateCubes();
  }, [cubeCount]);

  //Event Listener
  useEffect(() => {
    document.addEventListener("mousedown", onMouseDown);

    return () => {
      document.removeEventListener("mousedown", onMouseDown);
      document.removeEventListener("mousemove", onMouseMove);
      document.removeEventListener("mouseup", onMouseUp);
    };
  }, []);

  return <div ref={mountRef} style={{ width: "100%", height: "100vh" }} />;
};

export default ThreeScene;

I have been struggling with incorporating a clustering (or spiderfying) to a map with image icons based on this brilliant template https://github.com/handsondataviz/leaflet-point-map-sidebar?
Can anyone help? Thank you in advance.

I’ve re-read documentation and tried different versions of both leaflet and leaflet-markercluster but nothing seems to work.

I’m new in automation, just learning how to use tags for running scripts. And faced the challenge – I have 2 scenarios: @test1 and @test2, and @regression before Feature in feature file.

The issue is that when I try to run just @test1:

npm run test –tags @test1

• both (@test1 and @test2) scenarios are run (instead of the only @test1)

I suppose I have some incorrect configuration in package.js:

"scripts": { "test": "cucumber-js e2e and --config=cucumber.js -- --tags" },
OR maybe in my cucumber.js file:

export default { tags:'@regression or @test1 or @test2', }

Trying to manage this for a couple of days.
Thanks in advance

TypeError: n is not iterable TypeError: n is not iterable

I have an Angular and nodejs project running on heroku. The application was working fine and now all of a sudden I am having Angular building successfully, but get an error once I load the app. The error is minimal and I couldn’t find anything online. Any help would be appreciated.

core.js:6210 ERROR Error: Uncaught (in promise): TypeError: n is not iterable
TypeError: n is not iterable

at qe (router.js:3414:30)
at Xe.processChildren (router.js:3293:32)
at Xe.processSegmentGroup (router.js:3263:25)
at Xe.recognize (router.js:3242:31)
at router.js:3216:14
at l.project (router.js:3213:1)
at l._tryNext (mergeMap.js:44:27)
at l._next (mergeMap.js:34:18)
at l.next (Subscriber.js:49:18)
at l._next (tap.js:46:26)
at T (zone-evergreen.js:798:39)
at T (zone-evergreen.js:750:21)
at zone-evergreen.js:860:21
at u.invokeTask (zone-evergreen.js:399:35)
at Object.onInvokeTask (core.js:28567:33)
at u.invokeTask (zone-evergreen.js:398:40)
at s.runTask (zone-evergreen.js:167:51)
at y (zone-evergreen.js:569:39)
at j (polyfill.min.js:6:49500)
at u (polyfill.min.js:6:48005)

The error I get when running it locally is:

core.js:6210 ERROR Error: Uncaught (in promise): TypeError: mergedNodes is not iterable
TypeError: mergedNodes is not iterable
    at mergeEmptyPathMatches (router.js:3414:1)
    at Recognizer.processChildren (router.js:3293:1)
    at Recognizer.processSegmentGroup (router.js:3263:1)
    at Recognizer.recognize (router.js:3242:1)
    at recognize (router.js:3216:1)
    at MergeMapSubscriber.project (router.js:3463:20)
    at MergeMapSubscriber._tryNext (mergeMap.js:44:1)
    at MergeMapSubscriber._next (mergeMap.js:34:1)
    at MergeMapSubscriber.next (Subscriber.js:49:1)
    at TapSubscriber._next (tap.js:46:1)
    at resolvePromise (zone-evergreen.js:798:1)
    at resolvePromise (zone-evergreen.js:750:1)
    at zone-evergreen.js:860:1
    at ZoneDelegate.invokeTask (zone-evergreen.js:399:1)
    at Object.onInvokeTask (core.js:28567:1)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398:1)
    at Zone.runTask (zone-evergreen.js:167:1)
    at drainMicroTaskQueue (zone-evergreen.js:569:1)
    at j (polyfill.min.js:6:49500)
    at u (polyfill.min.js:6:48005)

and

Uncaught TypeError: 100,200,201,300,301,302 is not iterable!
    at push.SlkY.module.exports (_for-of.js:14:1)
    at _collection.js:61:1
    at new Set (es6.set.js:8:26)
    at 8Y7J (core.js:152:1)
    at __webpack_require__ (runtime.js:85:30)
    at Object.zUnb (main.ts:1:1)
    at __webpack_require__ (runtime.js:85:30)
    at 0 (alert.component.ts:12:28)
    at __webpack_require__ (runtime.js:85:30)
    at checkDeferredModules (runtime.js:46:23)

and

 Uncaught TypeError: true,1 is not iterable!
    at SlkY.t.exports (_for-of.js:14:42)
    at _collection.js:61:36
    at new <anonymous> (es6.set.js:8:34)
    at Object.fDlF (browser.js:613:29)
    at c (runtime-es2015.efcb1777b316fde67ca4.js:1:552)
    at Object.omvX (animations.js:1:1)
    at c (runtime-es2015.efcb1777b316fde67ca4.js:1:552)
    at 1Xc+ (overlay.js:2956:7)
    at c (runtime-es2015.efcb1777b316fde67ca4.js:1:552)
    at Object.nmIE (subscribeToArray.js:5:16)
SlkY.t.exports @ _for-of.js:14
(anonymous) @ _collection.js:61
(anonymous) @ es6.set.js:8
fDlF @ browser.js:613
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
omvX @ animations.js:1
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
1Xc+ @ overlay.js:2956
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
nmIE @ subscribeToArray.js:5
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
zUnb @ app.component.ts:60
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
0 @ ssr-window.esm.js:147
c @ runtime-es2015.efcb1777b316fde67ca4.js:1
t @ runtime-es2015.efcb1777b316fde67ca4.js:1
r @ runtime-es2015.efcb1777b316fde67ca4.js:1
(anonymous) @ main-es2015.938f4aeb39839be1485f.js:1

the issue might be in core-js:

my package.json file:

{
  "name": "app",
  "version": "2.0.0",
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "scripts": {
    "ng": "ng",
    "main": "server.js",
    "heroku-postbuild": "ng build DineNGo --aot --configuration=${ENV}",
    "preinstall": "npm install --location=global @angular/cli @angular/compiler-cli --legacy-peer-deps",
    "start": "ng serve",
    "cypress:open": "cypress open",
    "swagger": "node ./swagger.js",
    "cypress:run": "cypress run",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.1102.19",
    "@angular/animations": "^11.0.6",
    "@angular/cdk": "^11.0.6",
    "@angular/cli": "^11.2.19",
    "@angular/common": "^11.0.6",
    "@angular/compiler": "^11.0.6",
    "@angular/compiler-cli": "^11.2.14",
    "@angular/core": "^11.0.6",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^11.0.6",
    "@angular/language-service": "^11.0.6",
    "@angular/localize": "^11.0.6",
    "@angular/material": "^11.0.6",
    "@angular/platform-browser": "^11.0.6",
    "@angular/platform-browser-dynamic": "^11.0.6",
    "@angular/router": "^11.0.6",
    "@ng-bootstrap/ng-bootstrap": "9.0.2",
    "@ngtools/webpack": "^11.2.19",
    "@ngx-translate/core": "13.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/chart.js": "^2.7.42",
    "@types/chartist": "^0.9.38",
    "@types/crypto-js": "^3.1.47",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~2.8.22",
    "@types/jasminewd2": "~2.0.3",
    "@types/lodash": "4.14.135",
    "@types/node": "^11.15.54",
    "@types/socket.io": "^3.0.2",
    "@types/socket.io-client": "^3.0.0",
    "@types/uuid": "^8.3.0",
    "@types/w3c-web-usb": "^1.0.10",
    "@types/web-bluetooth": "0.0.4",
    "angular-bootstrap-md": "^11.1.0",
    "angular-cc-library": "^2.1.2",
    "angular-cli-ghpages": "^0.6.2",
    "angular-notifier": "^9.1.0",
    "angular-responsive-carousel": "^2.0.2",
    "angularx-qrcode": "^11.0.0",
    "apexcharts": "^3.44.0",
    "axios": "^1.6.1",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.18.3",
    "bootstrap": "^4.5.3",
    "chart.js": "^2.9.4",
    "chartist": "^0.11.4",
    "clover-ecomm-sdk": "^1.0.0",
    "config": "^3.3.6",
    "core-js": "2.5.4",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "crypto-js": "^4.2.0",
    "dotenv": "^6.1.0",
    "exec": "^0.2.1",
    "express": "^4.18.1",
    "express-jwt": "^8.4.1",
    "font-awesome": "^4.7.0",
    "fontawesome": "^5.6.3",
    "fs": "^0.0.1-security",
    "got": "^11.8.1",
    "hammerjs": "^2.0.8",
    "jsonwebtoken": "^9.0.2",
    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "lz-string": "^1.5.0",
    "material-dashboard": "^2.1.0",
    "material-design-icons": "^3.0.1",
    "material-design-lite": "^1.3.0",
    "mdbootstrap": "^4.19.2",
    "moment": "^2.30.1",
    "mongodb": "^3.0.10",
    "mongoose": "^5.11.15",
    "mongoose-to-swagger": "^1.5.1",
    "ng-apexcharts": "1.5.12",
    "ng-chartist": "^4.1.0",
    "ng-multiselect-dropdown": "^0.2.14",
    "ng-socket-io": "^0.2.4",
    "ngx-autosize": "^1.8.4",
    "ngx-bootstrap": "^6.2.0",
    "ngx-device-detector": "^2.0.0",
    "ngx-guided-tour": "^1.1.11",
    "ngx-infinite-scroll": "^10.0.0",
    "ngx-swiper-wrapper": "^10.0.0",
    "ngx-toastr": "11.1.1",
    "openai": "^4.17.4",
    "path": "^0.12.7",
    "popper.js": "^1.15.0",
    "postcss": "^8.4.14",
    "request-promise": "^4.2.4",
    "resize-base64": "^1.0.12",
    "rootpath": "^0.1.2",
    "rxjs": "^6.5.2",
    "rxjs-compat": "^6.3.3",
    "socket.io": "^4.6.2",
    "socket.io-client": "^4.6.2",
    "swagger-ui-express": "^5.0.0",
    "time-ago-pipe": "^1.3.2",
    "ts-node": "6.0.0",
    "tslib": "^1.9.0",
    "typescript": "4.1.6",
    "uuid": "^3.3.2",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/core": "^11.0.6",
    "@angular-devkit/schematics": "^11.0.6",
    "codelyzer": "^6.0.2",
    "cypress": "^13.5.0",
    "cypress-cucumber-preprocessor": "^4.3.1",
    "cypress-multi-reporters": "^1.6.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^6.4.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.0",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng2-charts-schematics": "^0.1.7",
    "protractor": "^7.0.0",
    "swagger-autogen": "^2.23.7",
    "swiper": "^6.8.4",
    "tslint": "~6.1.3"
  },
  "engines": {
    "node": "18.18.2",
    "npm": "9.8.1"
  }
}

My package.lock file can be found here:
https://drive.google.com/file/d/19xsXokxPTcu5TV7wRX3BGriFZkRii2e1/view?usp=sharing

There seems to be a package updated recently or Angular libraries that is causing this issue because even if I revert back to working builds, it still doesn’t work.

only place I see mergenodes which is the error is:

<div id="input">
<h1>Input (.JS Format)</h1>
<textarea id="js"></textarea>
</div>
<div id="output">
<h1>Free Cartridge Space</h1>
<textarea id="nes"></textarea>
</div>
<script>
let js = document.getElementById('js');
let nes = document.getElementById('nes');
let bytenum = 40976;
let num = 0;
let flag;
let i = 0;
js.addEventListener('keydown', function(event) {
    if (event.key === "Backspace" || event.key === "Delete") {
        flag = 0;
        forever();
    }else{
        flag = 1;
        forever();
    }
});
function forever() {
    if (i < num) {
        i++;
    }
    if (flag == 0 && num > 0) {
        num -= 1;
    }else if (flag == 1) {
        num += 1;
    }
    if (js.value[i] === "i" && js.value[i + 1] === "f") {
        bytenum -= 3;
        console.log(bytenum);
        console.log(i);
    }
}
forever();
</script>

The problem here is that it only goes one time, meaning that no matter how many of the string “if” is put in, the bytenum is only down by 3. However, if this is put in a for loop, this happens: when a key is pressed, if there is a string “if,” the bytenum decreases by three every time a key is pressed.

hello i would like to use html2canvas in electron, and i don’t know how to require the library

always a error message : SyntaxError: Cannot use import statement outside a module

i tried to use IPC Electron : const html2canvas = require(‘html2canvas’);
and mainWindow.webContents.send(‘sendhtml2canvas’, html2canvas);
to send the library to render process, but I didn’t succeed…

i also tried : “type”: “module” in package.json but it is not possible

Someone has a idea ?

Thank you.