Category: javascript

I’m currently developing an app. I’m new to aws-amplify everything was working completely fine until my baby sister deleted my node modules by mistake. After reinstalling my node modules I get these two errors

ERROR TypeError: Cannot read property ‘putVocabularies’ of undefined, js engine: hermes

ERROR Invariant Violation: “main” has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn’t called., js engine: hermes

if im correct i know main can come up if the wrong dependencies are installed.

Please i was very close to completing my project and this have me at a major set back

I tried reinstalling aws-amplify install as well as aws-amplify-react-native but nothing works I get the same error over and over

The checkbox that is created next to the task can not be set to the checked position which would create a line across the task. When opening console I don’t get any errors only an issue which is:

(A form field element has neither an id nor a name attribute)

Which when clicking on the checkbox increments up.
I am not sure how to assign a name or attribute to the checkbox as this is what i assume the problem is.

This is the function that would create the check box and list item in the java script file.

function renderTasks () {
    const taskList = document.getElementById("added-task")
    taskList.innerHTML = "";
    tasks.forEach((task, index) => {
        const li = document.createElement("li");
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.checked = task.completed;
        checkbox.addEventListener("change", () => toggleTask(index));
        li.appendChild(checkbox);

This is the body from the index.html file

<div class="container">
    <input type="text" id="addTaskInput" placeholder="Add Task">
    <button class="add-task-btn" onclick="addTask()">Add Task</button>
    <ul id="added-task"></ul>
</div>

This is the style sheet that crosses off the listed item.

.task.completed {
    text-decoration: line-through;
    color: #ccc;
}

i have a long text from a json file and i want to view it horizntal in pages like PageViewris there any way to do that? here is my code :

    <ScrollView style={customStyles.container}>
      <View style={customStyles.verses}>
        {verses.map((verse: string, index: number) => (
          <Pressable
            style={({ pressed }) => [
              {
                backgroundColor: pressed ? 'rgb(210, 230, 255)' : 'white',
              },
              customStyles.wrapperCustom,
            ]}
            onPress={async () => {
              sheetRef.current.open()
              const versesParse = verse.toString()
              // await AsyncStorage.setItem(verses, 'versesParse')
              // console.log('doneeeeeee');

            }

            }
            key={index}
          >
            <Text key={index} allowFontScaling={false} selectable={true} style={customStyles.verse}
            >
              <Text selectable={true} adjustsFontSizeToFit style={{ flex: 1, }}>
                {verse}
                {/* <Text>{index + 1}</Text> */}
                {/* <Image source={verseBullet} resizeMode="contain" style={customStyles.verseBullet}></Image> */}
              </Text>
            </Text>
          </Pressable>
        ))}
      </View>
    </ScrollView>

here is what i get`

I know this specific error has been asked here multiple times but i think this situation is unique enough to deserve its own post.

So i Just started thinkering with three.js in nextjs 14.
Everything seems to work perfectly locally but i still see the following error:
ReferenceError: document is not defined

I think there’s a point in here somewhere that uses the document to early to create the canvas i think but i haven’t located it yet as i suppose it will be in the threejs code itself.

Anyone here done something similar like this and knows where this issue get triggered?

"use client";
export const dynamic = "auto";
import { ISSPosition, fetchISSPosition } from "@/lib/api";
import { convertCoordsToSphere } from "@/lib/functions";
import React, { useRef, useEffect, useState } from "react";
import * as THREE from "three";

const earthRadius = 10;
const scene = new THREE.Scene();

// Fog setup
...

// Camera and renderer setup
...

const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true,
});

// Lighting setup
...

// Earth model setup
const geometry = new THREE.SphereGeometry(earthRadius, 64, 64);
const earthMat = new THREE.MeshPhongMaterial({
  shininess: 350,
  map: new THREE.TextureLoader().load("/earth_texture.jpg"),
  bumpMap: new THREE.TextureLoader().load("/earth_texture.jpg"),
});
const earth = new THREE.Mesh(geometry, earthMat);
earth.receiveShadow = true;
earth.rotation.x = 0.3;
scene.add(earth); // Add Earth to the scene upfront

// ISS model setup
...

const animate = () => {
  requestAnimationFrame(animate);
  earth.rotation.y -= 0.001;

  renderer?.render(scene, camera);
};

const ThreeScene = () => {
  const [issPosition, setIssPosition] = useState<ISSPosition>();
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const fetchISSData = async () => {
      setIssPosition(await fetchISSPosition());
    };

    const intervalId = setInterval(fetchISSData, 5000);

    if (typeof window !== "undefined") {
      containerRef.current?.appendChild(renderer.domElement);
    }

    animate();

    const handleResize = () => {
      if (renderer) {
        let size =
          window.innerWidth * 0.8 > 800 ? 800 : window.innerWidth * 0.8;
        renderer.setSize(size, size);
      }
    };

    handleResize();
    window.addEventListener("resize", handleResize);

    return () => {
      clearInterval(intervalId);
    };
  }, []);

  useEffect(() => {
    const animate = () => {
      requestAnimationFrame(animate);

      if (issPosition) {
        const pointCoords = convertCoordsToSphere(
          Number(issPosition.iss_position.latitude),
          -Number(issPosition.iss_position.longitude),
          earthRadius
        );

        issPoint.position.copy(pointCoords.applyMatrix4(earth.matrix));
        scene.add(issPoint);
      }

      renderer.render(scene, camera);
    };

    animate();
  }, [issPosition]);

  return (
    typeof window !== "undefined" && (
      <>
        <div className="m-auto max-w-fit" ref={containerRef}></div>
        {issPosition ? (
          <div className="flex flex-col gap-2 mb-8 w-fit justify-center items-center mx-auto">
            <span>Latitude: {issPosition?.iss_position.latitude}</span>
            <span>Longitude: {issPosition?.iss_position.longitude}</span>
          </div>
        ) : (
          <div className="flex gap-4 justify-center">
            <p className="mb-4">Locating ISS</p>
            <i className="border-b- border-primary w-4 h-4 rounded-full animate-spin"></i>
          </div>
        )}
      </>
    )
  );
};

export default ThreeScene;

I am interested in writing a js function which receives as input an array of masks and determines whether it is match for numbers only or a string.

Example :

Input:

[/[C-Xc-x]/, ' ']

Output:

String

Input:

[/d/, /d/, ' ']

Output:

Numbers

I tried to write several functions that would do this but I didn’t succeed.

I need help on how to use object model when I have multiremote capabilities as below:
Fyi, this is webdriverio, and use multiremote appium and chromedriver

   capabilities: {

        myBrowser: {
            "host": "localhost",
            "port": 9515,
            "path": "/",
            capabilities: {
                browserName: 'chrome',
                //browserVersion: '122.0.6261.39'
            }
        },
        myMobile: {
            "host": "localhost",
            "port": 4723,
            capabilities: {
                platformName: 'Android',
                'appium:deviceName': 'Pixel 4',
                'appium:platformVersion': '11.0',
                'appium:automationName': 'UIAutomator2', //make sure it's in UIAutomator2, not UiAutomator2
                'appium:app': path.join(process.cwd(), 'app\android\ApiDemos-debug.apk')
            }
        }
    },

Let say, my screen object are as below:

class TestScreen{
    get firstText(){
        return $('//android.widget.TextView[@content-desc="Accessibility"]');
    }

    async clickText(){
        await this.firstText.click();
    }
}

module.exports = new TestScreen();

So I tried it in my spec file, but it failed:

const { firstText } = require("../screen/test-screen.spec");


describe('test run', () =>{
    it('test run', async () => {
        await myMobile.firstText.click();
        
    })
})

I want the code to be able to use object model with the multiremote capabilities

I have a NextJs Project (v14.1.3) and I was wondering if there’s a way to make it so that this import

import foo from 'path/to/foo/foo'

Could instead be written as

import foo from 'path/to/foo'

While still keeping the foo file inside the foo directory

Having the following code:

const foo = (flag: boolean) => {
  if (flag) {
    return {
       success: true,
       data: {
         name: "John",
         age: 40
       }
    }
  }

  return {
    success: false,
    data: null
  }
}    

const result = foo(true);

if (result.success) {
   console.log(result.data.name); // TS error: 'result.data' is possibly 'null'
}

Why can’t typescript infer that data always exists if flag is set to true?

I know I can fix this by defining a return type for the function, but it’d be good if TS automatically infers it.

How to modify a default parameter in a javascript function, knowing that the previous parameters must remain default?

function f(a = 'a', b='b', c='c') {
  return [a, b, c];
}

f( c ='some value here'); //must return ['a', 'b', 'some value here']

I want something similar to what can be done in python.

def f(a = 'a', b = 'b', c ='c'):
    return [a, b, c]

f(c = 'some value here') #will return ['a', 'b', 'some value here']

Is there any way to do this ?

I am attempting to create an event in my Teamup calendar from javascript.

I send:

{ 
  method: 'POST',
  contentType: 'application/json',
  headers: 
  {  
    Accept: 'application/json',
    'Teamup-Token': <api_token>,
    Authorization: 'Bearer <auth_code>' 
  },
  payload: '{"subcalendar_ids":[0],"start_dt":"2024-08-24T14:15:22Z","end_dt":"2024-08-24T14:15:22Z","all_day":false,"tz":"Europe/London","remote_id":"string","title":"Test Title","notes":"Test Desc\n","location":"Home, EX6 6LQ","who":"Test Organiser","signup_enabled":false,"comments_enabled":false}',
  muteHttpExceptions: true 
}

To: https://api.teamup.com/<mycalendarurl>/events

But get:

{"error":{"id":"no_permission","title":"No permission","message":"You do not have the required permissions to do this. This may be due to a change in permissions of your link since you loaded the calendar. Please refresh the calendar."}}

I have requested the <auth_code> authentication token immediately before posting this request.
I haven’t changed permissions, and dont understand what “Please refresh the calendar” means (have quit from my browser, gone back to my calendar, refreshed that webpage etc…)

I am using <mycalendarurl> generated specifically for api calls with modify permissions in the Sharing section of the Teamup dashboard.
I generated <api_token> from the Request Teamup API Key page on the Teamup website

I can find no documentation on the required subcalendar_ids key, and have used 0 as per the example code hoping that indicates the first calendar

This is very close to working because it complains about the dates ‘does not match any accepted ISO8601 date format.’ if I include the 000 millisecond part from toISOString() as opposed to the permissions issue.

I’m using microservice architecture where i have multiple servers. in first server i have user schema for users and when I’m trying to update something from different server, but it’s not updating anything, and also I’m not getting any error.

  //getting users collection without schema and i'm able to read the document with this but not             able to update anything
 `const mongoose = require("mongoose");
 const User = mongoose.model("User", {}, "users");
 module. Exports = User;`

i don’t know if there any policy for security, or any restriction to update from cross-server connection

i asked ChatGPT, Gemini: say’s i can update document, but i don’t know what I’m doing wrong

How to combine multiple compute value, like use functions, every compute value has get and set properties, and the code is too long.

let equipmentCode = computed({
    get: () => {
        return props.id ? itemData.value.equipmentCode : newData.value.equipmentCode;
    },
    set: (newValue) => {
        return props.id ? (itemData.value.equipmentCode = newValue) : (newData.value.equipmentCode = newValue);
    },
});
let equipmentName = computed({
    get: () => {
        return props.id ? itemData.value.equipmentName : newData.value.equipmentName;
    },
    set: (newValue) => {
        return props.id ? (itemData.value.equipmentName = newValue) : (newData.value.equipmentName = newValue);
    },
});
let classification = computed({
    get: () => {
        return props.id ? itemData.value.classification : newData.value.classification;
    },
    set: (newValue) => {
        return props.id ? (itemData.value.classification = newValue) : (newData.value.classification = newValue);
    },
});

Is there any way to combine these computes to reduce codes?

I’m trying to make an Android app that shows the content of an HTML using GeckoView

//MainActivity.kt

class MainActivity : AppCompatActivity() {
    private lateinit var geckoView: GeckoView
    private val geckoSession = GeckoSession(GeckoSessionSettings.Builder().allowJavascript(true).build())

    private fun setupGeckoView() {
        // 1
        geckoView = findViewById(R.id.geckoview)

        // 2
        val runtime = GeckoRuntime.create(this)
        geckoSession.open(runtime)

        // 3
        geckoView.setSession(geckoSession)

        // 4
        val apkURI: URI = File(packageResourcePath).toURI()
        val assetsURL = "jar:$apkURI!/assets/"
        val myURL = assetsURL + "index.html"
        geckoSession.loadUri(myURL)
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        setupGeckoView()
    }
}

In the assets I have the index.html, a bunch of .css and a .js script. The app launches, correctly displays the html (meaning that also css was correctly loaded), but the js script doesnt start and this error is returned:

[JavaScript Error: "NS_ERROR_NOT_AVAILABLE: " {file: "jar:file:///data/app/com.icp.firefox_app-2/base.apk!/assets/full-offline.iife.js" line: 3}]
                                                                                                    @jar:file:///data/app/com.icp.firefox_app-2/base.apk!/assets/full-offline.iife.js:3:4777
                                                                                                    @jar:file:///data/app/com.icp.firefox_app-2/base.apk!/assets/full-offline.iife.js:101937:101768

Doesn anyone have any idea what could be the problem?

I have a table with data inside. Every row contains a button that allows to modify that item and send a Put request.
I want to populate the form with the data of the row selected, so changes can be made a lot easier.
This is the modal

<div class="modal-body" id="modal-body-modify">
  <label for="Name">Name:</label>               <input id="NamePut" type="text" name="Name">
  <label for="Surname">Surname:</label>         <input id="SurnamePut" type="text" name="Surname">
  <label for="Birthday">Birthday:</label>       <input id="BirthdayPut" type="text" name="Birthday">
  <label for="Fiscal-Code">Fiscal Code:</label> <input id="Fiscal-CodePut" type="text" name="Fiscal-Code">
  <label for="Course">Course:</label>
  <select id="CourseSelectPut" name="Course">
    <option class="optionPut" value="nessuno" selected>nobody</option>
  </select>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="eliminaMessaggioPut()">Close</button>
  <button type="button" class="btn btn-primary" onclick="Put()" id="modalModificaButton">Modify</button>
</div>

Normally, to take data from that table and write it on my page I do this:

var name           = document.getElementById(`name-${id}`);
var surname        = document.getElementById(`surname-${id}`);
var divTitle       = document.getElementById("nomeStudente");
divTitle.innerText = name.innerHTML + " " + surname.innerHTML;

I’ve tried many things to be able to write inside that input field, but nothing succeeds.

var NamePut   = document.getElementById("NamePut");
NamePut.value = Name.innerHTML;

var name    = document.getElementById(`name-${id}`);
var NamePut = document.getElementById("NamePut");
NamePut.append(name);
// document.getElementById(`NamePut`).setAttribute('value', Name);
// NamePut.value = document.getElementById(`name-${id}`).value;

I know a solution could be transforming it into a form, but it would change all the css style and I prefer it to solve it maintaining it like this.

I am trying to write a simple html document that returns a downloadable square image of a color defined by the user input of a single color. Any help would be much appreciated.

No code yet, any source code is appreciated.