Category: javascript

Current Behavior

browser still in loading state after adding a lib for my components im using nx monorepo with react and vite

Expected Behavior

the app to be loaded and shown the ui in browser

Steps to Reproduce

• create nx monorepo
• add workspace for react
• add react and typescript in also vite in package.json
• import your ui in apps/yourApp
• nx serve yourApp
• success compilation
• open the url
• the app will still in loading state

Nx Report

Node   : 21.5.0
OS     : linux-x64
pnpm   : 8.15.3

nx (global)        : 18.0.0
nx                 : 18.0.6
@nx/js             : 18.0.6
@nx/linter         : 18.0.6
@nx/eslint         : 18.0.6
@nx/workspace      : 18.0.6
@nx/devkit         : 18.0.6
@nx/eslint-plugin  : 18.0.6
@nx/react          : 18.0.6
@nrwl/tao          : 18.0.6
@nx/vite           : 18.0.6
@nx/web            : 18.0.6
typescript         : 5.3.3

Failure Logs

when i try to build:

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.
vite v5.1.4 building for production...

/src/styles.scss doesn't exist at build time, it will remain unchanged to be resolved at runtime
x Build failed in 9.31s
error during build:
Error: Unexpected early exit. This happens when Promises returned by plugins cannot resolve. Unfinished hook action(s) on exit:
(vite:esbuild) transform "/home/oem/ppppppp/paletta monorepo/react-monorepo/Libs/Assets/src/lib/icons/StatistiqueIcon.tsx"
(vite:esbuild) transform "/home/oem/ppppppp/paletta monorepo/react-monorepo/Libs/Assets/src/lib/icons/ExpandRightIcon.tsx"
(vite:esbuild) transform "/home/oem/ppppppp/paletta monorepo/react-monorepo/Libs/Assets/src/lib/icons/HomeIcon.tsx"
(vite:esbuild) transform "/home/oem/ppppppp/paletta monorepo/react-monorepo/Libs/Assets/src/lib/icons/ParcCheckIcon.tsx"
    at process.handleBeforeExit (file:///home/oem/ppppppp/paletta%20monorepo/react-monorepo/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19915:28)
    at Object.onceWrapper (node:events:634:26)
    at process.emit (node:events:519:28)
Warning: command "vite build" exited with non-zero status code

when i try to serve: (it seems working)

 nx run admin:serve

The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.

  VITE v5.1.4  ready in 402 ms

  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

[TypeScript] Found 0 errors. Watching for file changes.
h

  Shortcuts
  press r + enter to restart the server
  press u + enter to show server url
  press o + enter to open in browser
  press c + enter to clear console
  press q + enter to quit

Package Manager Version

pnpm 8.15.3

Operating System

Linux

Additional Information

I’m getting an error whenever I declare my getDataFromApi function inside my class AppWrapper
imageShowingError

The problem is that I thought just by putting them inside curly braces, the problem would be resolved, but I was wrong, can someone help me?

There is an old jsp +javascript application, I need to redirect to the page of a new application written in Angular and send data
Is it possible to transfer, for example, a token to the angular?

I tried to make a redirect to – http://localhost:4200/token/hrl4lhlhga – hrl4lhlhga <== token

const routes: Routes = [
  {
    path: 'token/:value',
    component: TestComponent,
  }
];

export class TestComponent {
  @Input() value?: string;
}

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(appRoutes, withComponentInputBinding()),

But ‘value’ always undefined

I have a Google Cloud Virtual Machine instance which has Guacamole installed on it via Docker. I can access via my browser correctly via http://[virtualmachineip]:8080/guacamole/#/ and control it.

I’m building a Svelte app that would let me control the virtual machine through this Client, however I keep receiving the error: ERROR o.a.g.w.GuacamoleWebSocketTunnelEndpoint - Creation of WebSocket tunnel to guacd failed: Parameter "GUAC_ID" is required. on my guacamole docker logs.

Here is how my javascript code is looking:

  function initializeGuacamoleClient() {

    var tunnel = new Guacamole.WebSocketTunnel(
      "ws://[virtualmachineaddress]:8080/guacamole/websocket-tunnel"
    );

    guacClient = new Guacamole.Client(tunnel);

 
    if (displayContainer) {
      displayContainer.appendChild(guacClient.getDisplay().getElement());
      displayContainer.style.display = "block";
      guacClient.connect("username=guacadmin&password=guacadmin");
    }
  }

I would appreciate any inputs because I have not found any rellevant information on the documentation.

Here is my docker-compose.yml just in case it may have something to do.

version: '3'

services:
  guacd:
    image: guacamole/guacd
    container_name: guacd
    restart: always
    ports:
      - "4822:4822"

  mysql:
    image: mysql:5.7
    container_name: guac_mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: (my password)
      MYSQL_DATABASE: guacamole_db
      MYSQL_USER: guacamole_user
      MYSQL_PASSWORD: (my password)
    volumes:
      - guacamole_db:/var/lib/mysql

  guacamole:
    image: guacamole/guacamole
    container_name: guacamole
    restart: always
    depends_on:
      - guacd
      - mysql
    environment:
      GUACD_HOSTNAME: guacd
      MYSQL_HOSTNAME: mysql
      MYSQL_DATABASE: guacamole_db
      MYSQL_USER: guacamole_user
      MYSQL_PASSWORD: (my password)
      GUACAMOLE_CORS_ENABLED: 'true'
      GUACAMOLE_CORS_ALLOWED_ORIGINS: '*'
      GUACAMOLE_CORS_ALLOWED_METHODS: 'GET, POST, PUT, DELETE, OPTIONS'
    ports:
      - "8080:8080"
    links:
      - guacd
      - mysql

volumes:
  guacamole_db:

I’m using this library https://www.npmjs.com/package/guacamole-common-js
Thank you so much.

So after entering data to a form, it should redirect to the /VisitorConfirmationPage with the data of the user stored in the object “formData”,but instead it refreshes the form page( the data has been sent to the server and database). The alert(‘added’) doesn’t always show up. Why is this happening?

    const navigate = useNavigate();

const addData=async()=>{

        var name = document.getElementById("inputName").value;
        var email = document.getElementById("inputEmail").value;
        var phoneNo = document.getElementById("inputPhoneNumber").value;
        var employee = document.getElementById("employee").value;
        // var image = p_image;
        const imageSrc = webcamRef.current.getScreenshot();
        setImageSrc(imageSrc);
        
        const response = await fetch(imageSrc);
        const blob = await response.blob();

        let formData = new FormData();
        formData.append("name", name)
        formData.append("email", email)
        formData.append("phoneNo", phoneNo)
        formData.append("employee", employee)

       
        formData.append("p_image",blob, "captured-image.jpg");

        

        axios.post("http://localhost:4000/api/registerVisitor",formData,{headers:{"Content-Type":"multipart/form-data"}}).then(response =>{
            alert('added');
            navigate('/VisitorConfirmationPage',{state:formData})
        }).catch(error => {
            console.error(error);
            alert("error!")
        });        
    }

I tried to move the navigate function outside the axios function. That didn’t work. I also tried this code inside the response of the axios response case and it didn’t work.

               <Link to={{
                pathname: "/VisitorConfirmationPage",
                state:formData
            }} />
            window.location = "/VisitorConfirmationPage";;

let’s start with two files index.html and script.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>click me</button>
    <div></div>
    <script src="script.js"></script>
</body>
</html>

const buttonUser = document.querySelector("button");
const divUser = document.querySelector("div");

buttonUser.addEventListener("click", () => {
    divUser.innerHTML = `
        <h1> welcome to the page </h1> 
        <button onclick="welcomeMassage()"> click me 2 <button>
    `
})

function welcomeMassage() {
    console.log("Hello World!");
}

if i clicked in the first button the addEventListener work and adding h1 and second button two divUser adn if i click on the second one it’s also work and console.log(“Hello world”) but :::::::

if change the javascript file two script.mjs and index.js

    <script type="module" src="script.mjs"></script>

When I click on the first button, the addEventListener works, but when I click on the second button, it does not work and shows up in the console. The welcomeMassage function is not defined, and I can’t access it from the console. So why has this happened, and how can I prevent this behavior?

i want when use scritp.mjs file and i click in the button not show in console functionNamve not defined and perform the function

I’m trying to write a firefox addon that modifies the body of a background http request to an api. I found webRequest.filterResponseData(), but it did not work for my use case:

If I go directly to the api url, the response body gets changed by the filter.

If I go to the website that makes the request in the background as it loads, the filter doesn’t change the response body. I debugged the addon and saw that the response was being sent to the loading page and only after that filter.ondata was called, so the filter had no effect.

Does anyone know how can I make sure the filter is applied before the api response is passed to the page being loaded?

I’m trying to run a Python model in my React Native project using TensorFlow.js. The model I have is a ResNet50 model trained in Python. How can I integrate this model into my React Native project and use it for image prediction?

import streamlit as st
import os
from PIL import Image
import numpy as np
import pickle
import tensorflow
from tensorflow.keras.layers import GlobalMaxPooling2D
from tensorflow.keras.applications.resnet50 import ResNet50,preprocess_input
from sklearn.neighbors import NearestNeighbors
from numpy.linalg import norm
import cv2

feature_list = np.array(pickle.load(open('featurevector.pkl','rb')))
filenames = pickle.load(open('filenames.pkl','rb'))

model = ResNet50(weights='imagenet',include_top=False,input_shape=(224,224,3))
model.trainable = False

model = tensorflow.keras.Sequential([
    model,
    GlobalMaxPooling2D()
])

st.title('Man & Women Fashion Recommender System')

def save_uploaded_file(uploaded_file):
    try:
        with open(os.path.join('uploads',uploaded_file.name),'wb') as f:
            f.write(uploaded_file.getbuffer())
        return 1
    except:
        return 0

def extract_feature(img_path, model):
    img=cv2.imread(img_path)
    img=cv2.resize(img, (224,224))
    img=np.array(img)
    expand_img=np.expand_dims(img, axis=0)
    pre_img=preprocess_input(expand_img)
    result=model.predict(pre_img).flatten()
    normalized=result/norm(result)
    return normalized

def recommend(features,feature_list):
    neighbors = NearestNeighbors(n_neighbors=6, algorithm='brute', metric='euclidean')
    neighbors.fit(feature_list)

    distances, indices = neighbors.kneighbors([features])

    return indices

# steps
# file upload -> save
uploaded_file = st.file_uploader("Choose an image")
print(uploaded_file)
if uploaded_file is not None:
    if save_uploaded_file(uploaded_file):
        # display the file
        display_image = Image.open(uploaded_file)
        resized_img = display_image.resize((200, 200))
        st.image(resized_img)
        # feature extract
        features = extract_feature(os.path.join("uploads",uploaded_file.name),model)
        #st.text(features)
        # recommendention
        indices = recommend(features,feature_list)
        # show
        col1,col2,col3,col4,col5 = st.columns(5)

        with col1:
            st.image(filenames[indices[0][1]])
        with col2:
            st.image(filenames[indices[0][2]])
        with col3:
            st.image(filenames[indices[0][3]])
        with col4:
            st.image(filenames[indices[0][4]])
        with col5:
            st.image(filenames[indices[0][5]])
    else:
        st.header("Some error occured in file upload")

code looks like this.

Goal of the application is to provide 5 similar images based on the input image. I also want to use this for a clothing application but I’m not experienced in the field of artificial intelligence. Is anyone know how to convert the code?

Using JavaScript how can the content after #:~:text= in the URL be obtained?

#:~:text= is used to Scroll To Text Fragment.

I would have expected the Get fragment (value after hash ‘#’) from a URL method to work, but it does not.

I’m building a custom single-product template for woocommerce and as a result of the way certain divs are shown on desktop and certain divs are shown on mobile I am calling the review from with twice, however this breaks the “Star” input, on the first form, it shows the “Star” input twice and on the second form it changes the form to show the “Star” input as a dropdown with “good, excellent etc..”.

Both forms do submit and work fine apart from that.

I know this must be related to the js that changes the dropdown into stars but I don’t know how or where to change it to work for both forms

I inherited a project with no documentation and keep getting the error ScrollTrigger.js: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'pin') in the web console when going away from a page and then back to it. How do I define pin as true or false or something in the various JavaScript components? This is built in Pug JS. Also getting this error Unhandled Promise Rejection: TypeError: undefined is not an object (evaluating 'curTrigger.pin')

Some components have this:

this.magicPin();

magicPin() {
        ScrollTrigger.matchMedia({
            '(min-width:768px)': () => {
                ScrollTrigger.create({
                    trigger: this.items,
                    start: 'center center',
                    end: () => (80 * this.item.length * 2) + '%',
                    pin: true,
                });
            }
        });
    }

And some do not have magicPin or ScrollTrigger defined:

import {Component} from 'bona';
import gsap from 'gsap';
import ScrollTrigger from 'gsap/ScrollTrigger';
import {magicSlideElementAppear} from '../lib/transitions';

export default class Billboard extends Component {
    constructor() {
        super(...arguments);

        this.header = this.el.querySelector('.billboard-header');
        this.text = this.el.querySelector('.billboard-text');
        this.action = this.el.querySelector('.billboard-action');
    }

    async onInit() {
        await document.fonts.ready;

        this.magicShow();
    }

    magicShow() {
        if (this.header) magicSlideElementAppear(this.header);
        if (this.text) magicSlideElementAppear(this.text);
        if (this.action) magicSlideElementAppear(this.action);
    }
}

I am just wondering how to define it in the components that don’t have or need it.

Hi I want to use InlineQueryResultsButton from Telegram api bot i cant find any solution for it
here this an api telegram for expressJs node
https://core.telegram.org/bots/api#inlinequeryresultsbutton

can someone help me with it if i should make this api by myself or if you have the source please share with me

I am working on a project to scrape data from the following website:

https://search.hotellook.com/hotels?=1&adults=2&checkIn=2024-03-19&checkOut=2024-03-26&children=&currency=gbp&destination=Lisbon&language=en_us&marker=google.Zz93ac967d879848dba99b874-126017#f

I am using Node JS & have used Puppeteer. I have managed to scrape everything except price of a hotel from the website. I am attaching the screenshot to point out what price I am interested in to scrape.

I have tried the following variations but they all return null or empty values. I am not sure what is going on:

const price = element.querySelector('.main_gate-price .currency_font currency_font--gbp').textContent;
const price = element.querySelector('.currency_font currency_font--gbp').textContent;
const price = element.querySelector('.card-main_gate .main_gate-price_info .currency_font.currency_font--gbp').innerText;

I have used the above variations with “textContent”, “innerHTML”, “innerText” but nothing when it clearly seems that the price is stored as a text node in the span element with class “currency_font currency_font–gbp”.

Can someone please assist & point me in right direction? The image I was referring to for reference:

The problem with generating a generic response for Swagger in Nest.js

Description

In the Nest.js application, for GET controllers (retrieving a list of items), I want to generate a sample response in Swagger. The response object contains fields: status, notification, and an object called details. Inside the details object, there are pagination information and an items field, which is an array of returned elements. The items array should be passed generically because the type of returned elements will vary for different controllers. According to the Nest.js documentation, to pass a generic type, a custom decorator needs to be created (in my case, it’s called ApiPaginatedResponse).

What’s the problem?

Unfortunately, when items are nested within the details object, they are generated outside of the details object. The documentation does not include an example with nesting (double generic passing).

What do I want to achieve?

The items array should be located inside the details object. Perhaps someone has encountered a similar issue and can help me. I’ve tried many ways already, but I don’t think I fully understand how it works.

Dto’s:

export class GetUsersDto {
  id: number;
  first_name: string;
  last_name: string;
  email_address: string;
}

export class Pagination {
  pageSize: number;
  total: number;
  current: number;
}

export class Details<TData> {
  @ApiProperty({ type: Pagination })
  pagination: Pagination;

  @ApiProperty()
  items: TData[];
}

export class PaginatedResponseDto<TData> {
  @ApiProperty()
  status: number = 200;

  @ApiProperty({ type: NotificationDto })
  notification: NotificationDto;

  @ApiProperty()
  details: Details<TData>;
}

Controller getUsers:

@Get('get-users')
  @ApiPaginatedResponse(GetUsersDto)
  async getUsers(
    @Query() filterDto: GetUsersFilterDto,
    @Req() { user: { userId } }: TUserReq,
    @Res() res: Response,
  ): Promise<Response<TResponse>> {
    const result = await this.adminInstitutionService.getUsers(filterDto, userId);
    return res.status(result.status).send(result);
  }

ApiPaginatedResponse.decorator.ts:

import { applyDecorators, Type } from '@nestjs/common';
import { ApiExtraModels, ApiOkResponse, getSchemaPath } from '@nestjs/swagger';
import { PaginatedResponseDto } from '../dto';

export const ApiPaginatedResponse = <TModel extends Type<any>>(model: TModel) => {
  return applyDecorators(
    ApiExtraModels(PaginatedResponseDto, model),
    ApiOkResponse({
      schema: {
        allOf: [
          { $ref: getSchemaPath(PaginatedResponseDto) },
          {
            properties: {
              items: {
                type: 'array',
                items: { $ref: getSchemaPath(model) },
              },
            },
          },
        ],
      },
    }),
  );
};

The generated response. As you can see, items are generated outside of the details object.

{
  "status": 200,
  "notification": {
    "title": "string",
    "message": "string"
  },
  "details": {
    "pagination": {
      "pageSize": 0,
      "total": 0,
      "current": 0
    },
    "items": [
      "string"
    ]
  },
  "items": [
    {
      "id": 0,
      "first_name": "string",
      "last_name": "string",
      "email_address": "string",
    }
  ]
}

If my series have different sizes apexchart doesn’t render tooltip shared with value with same x point.
Follow codepen

var ts2 = 1484418600000;
var dates = [];
var dates2 = [];
for (var i = 0; i < 120; i++) {
  ts2 = ts2 + 86400000;
  var innerArr = [ts2, i * Math.floor(Math.random() * 220)];
  var innerArr2 = [ts2, i * Math.floor(Math.random() * 400)];
  dates.push(innerArr);
  dates2.push(innerArr2);
  
}

dates2.push([ts2 + 86400000, 1000]);
console.log(dates)

var options = {
  chart: {
    type: "line",
    stacked: false,
    height: 250,
    zoom: {
      type: "x",
      enabled: true
    },
    toolbar: {
      autoSelected: "zoom"
    }
  },
  dataLabels: {
    enabled: false
  },
  series: [
    {
      name: "XYZ MOTORS",
      data: dates
    },{
      name: "asdasd",
      data: dates2
    }
  ],
  markers: {
    size: 0
  },
  title: {
    text: "Stock Price Movement",
    align: "left"
  },
  xaxis: {
    type: "datetime"
  },

  tooltip: {
    shared: true,
  }
};

var chart = new ApexCharts(document.querySelector("#chart"), options);

chart.render();

https://codepen.io/Fernando-BA-the-animator/pen/XWQjYmX

I want the tooltip shows all series value with same x point.
And I cannot find any solution for this bug, maybe this is an issue with apex chart library.