Category: javascript

I’m trying to connect with supabase from Vue.js 3-rd verstion UI. But when I start my project with npm run serve, I’m getting the following error:

Module not found: Error: Can’t resolve ‘@supabase/supabase.js’ in ‘/Users/alexandr/Documents/Other Projects/Vue3/004/servers/src’

Error tells that it could not find module in .../servers/src but all modules in node_modules, which is in main project’s location.

In src folder only vue components, js-file and css theme.

Here is my code of main vue.js file

<template>
  <div class="container">
  </div> 
</template>

<script>
import { createClient } from '@supabase/supabase.js'

export default {
  methods: {
    async loadPeople() {
      const supabaseUrl = process.env.SUPABASE_URL
      const supabaseKey = process.env.SUPABASE_KEY

      const supabase = createClient(supabaseUrl, supabaseKey)

      console.log('Supabase Objectnn', supabase)

      const {data, error} = await supabase.from('Customers').select('*')

      if (error) {
        console.log(error)
      }else{
        console.log('datann', data)
      }
      
    }
  }
}
</script>

<style>
</style>

[email protected]
@vue/cli 5.0.8
@supabase/[email protected]

npm run serve starts the following cmd vue-cli-service serve

Firstly, I’ve reinstalled subabase like npm install @supabase/supabase-js instead of ‘npm install supabase’. But it did not helped.

I can’t understand why js searching module in src instead of Project/node_modules?

I am using react-router-dom version 7.0.1.
I have below code

import React from "react";
import Sidebar from "./../Sidebar/Sidebar";
//React Router's Outlet for rendering dynamic content
import { Outlet } from "react-router-dom";
import Box from "@mui/material/Box";
import Navbar from "../Header/Navbar";
import { useSelector } from "react-redux";
import { getToken } from "./../../../redux/auth/authSelectors";

export default function Main() {
  const isAuthenticated = useSelector(getToken);

  return (
    <>
      <Navbar />
      <Box height={30}></Box>
      <Box sx={{ display: "flex" }}>
        {isAuthenticated && <Sidebar />}
        {/* The Outlet will render the content based on the current route */}
        <Outlet />
      </Box>
      {/* <Footer /> */}
    </>
  );
}

// src/routes/RoutesComponent.js
import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Routes,
} from "react-router-dom";
import FeatureRoutes from "./FeatureRoutes";
import PublicRoutes from "./PublicRoutes";
import CommonRoutes from "./CommonRoutes";
import NotFoundPage from "../pages/NotFoundPage/NotFoundPage";
import Main from "./../components/layouts/Main/Main";

const RoutesComponent = () => (
  <Router>
    <Routes>
      {/* Main route is the parent route that renders the layout */}
      <Route path="/" element={<Main />}>
        {/* Nested routes */}
        <Route path="/" element={<PublicRoutes />} /> {/* Public routes */}
        <Route element={<CommonRoutes />} /> {/* Common routes */}
        <Route element={<FeatureRoutes />} />{" "}
        {/* Feature Routes (grouped by URL prefixes) */}
      </Route>
      <Route path="*" element={<NotFoundPage />} /> {/* Catch-all for 404 */}
    </Routes>
  </Router>
);

export default RoutesComponent;


// src/routes/PublicRoutes.js
import React, { Suspense, lazy } from "react";
import { Routes, Route } from "react-router-dom";
import SuspenseFallback from "./../components/widgets/SuspenseFallback";
const Home = lazy(() => import("./../pages/Home/Home"));
const LoginPage = lazy(() => import("./../pages/Auth/Login"));
const Register = lazy(() => import("./../pages/Auth/Register"));

const PublicRoutes = () => {
  return (
    <Suspense
      fallback={<SuspenseFallback message="Loading..." type="progress" />}
    >
      <Routes>
        {/* The index route will render Home by default inside the Main layout */}
        <Route index element={<Home />} />

        {/* Other routes will be rendered inside Main's Outlet */}
        <Route path="login" element={<LoginPage />} />
        <Route path="register" element={<Register />} />
        {/* <Route path="about" element={<Pages.About />} />
      <Route path="settings" element={<Pages.Settings />} /> */}
      </Routes>
    </Suspense>
  );
};

export default PublicRoutes;

//src/routes/ProtectedRoute.js
import React from "react";
import { Route, Navigate } from "react-router-dom";
import { isAuthenticated, getUserRole } from "../utils/auth";

const ProtectedRoute = ({ element, roles, ...rest }) => {
  // Check if user is authenticated and has required roles
  const isAuthorized = isAuthenticated() && roles.includes(getUserRole());

  return (
    <Route
      {...rest}
      element={isAuthorized ? element : <Navigate to="/login" />}
    />
  );
};

export default ProtectedRoute;

// src/routes/CommonRoutes.js
import React, { Suspense, lazy } from "react";
import { Routes, Route } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
import SuspenseFallback from "./../components/widgets/SuspenseFallback";
// Lazy load the dashboard component
const Dashboard = lazy(() => import("./../pages/Dashboard/Dashboard"));

const CommonRoutes = () => {
  return (
    <Suspense
      fallback={<SuspenseFallback message="Loading..." type="progress" />}
    >
      <Routes>
        {/* Dashboard Route - Accessible to user and admin */}
        <ProtectedRoute
          path="dashboard"
          roles={["user", "admin"]}
          element={<Dashboard />}
        />

        {/* <ProtectedRoute
        path="another-page"
        roles={["admin"]}
        element={<AnotherPage />}
      /> */}
        {/* More routes can be added here */}
      </Routes>
    </Suspense>
  );
};

export default CommonRoutes;


// src/routes/FeatureRoutes/index.js
import React from "react";
import { Route, Routes } from "react-router-dom";

import UserRoutes from "./UserRoutes";
import ProductRoutes from "./ProductRoutes";

const FeatureRoutes = () => (
  <Suspense
    fallback={<SuspenseFallback message="Loading..." type="progress" />}
  >
    <Routes>
      {/* Define the prefix for all user-related routes */}
      <Route path="users/*" element={<UserRoutes />} />

      {/* Define the prefix for all product-related routes */}
      <Route path="products/*" element={<ProductRoutes />} />
    </Routes>
  </Suspense>
);

export default FeatureRoutes;


// src/routes/FeatureRoutes/UserRoutes.js
import React from "react";
import { Routes, Route } from "react-router-dom";
import UserProfile from "./UserProfile";


const UserRoutes = () => (
  <>
    {/* Grouping all routes under the "/user" prefix */}

    {/* Protected Route for User Profile */}
     <ProtectedRoute
      exact
      path="profile"
      component={UserProfile}
      roles={["user", "admin"]} // Only users and admins can access
    /> 

 
  </>
);

export default UserRoutes;

So as mentioned in above code, RouteComponent is starting point of routes which can have PublicRoutes , CommonRoutes, FeatureRoutes etc are wrapped under Main Component. In FeatureRoutes, I have index.js file which includes routes of features like users, products etc using prefixes. PublicRoutes , CommonRoutes can have multiple paths/routes. So I don’t want to give any specific path in RoutesComponent. But it should render according to structure.

With above code structure only http://localhost:3000/ path which is in PublicRoutes file is working and loading Home component.

other paths for example:-

http://localhost:3000/login, 
http://localhost:3000/register, 
http://localhost:3000/dashboard, 
http://localhost:3000/users/profile 

etc are not working or showing NotFoundPage.

Whats going wrong in above code ? please help and guide.

I am trying to implement a Google sign in option on my website by following their guide: https://developers.google.com/identity/sign-in/web/sign-in.

1. I created the credentials
2. I put the Google Platform Library code at the end of my head tags
3. I put the App’s client ID right after it and changed it to the client id I got from point 1.
4. I put a test button on the site as they provided <div class="g-signin2" data-onsuccess="onSignIn"></div>

However when I now load the browser I get the following errors in the console (I replaced my domain and client ID from the errors with placeholders):

[Report Only] Refused to load the script 'https://www.gstatic.com/_/mss/boq-identity/_/js/k=boq-identity.IdpIFrameHttp.sv.IwDkfwbeEEg.es5.O/am=DAY/d=1/rs=AOaEmlEdZyiJuV_FbDciB-VB31grkH9-LA/m=base' because it violates the following Content Security Policy directive: "script-src 'unsafe-inline' 'unsafe-eval' blob: data:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

cb=gapi.loaded_0?le=scs:115  Uncaught {error: 'idpiframe_initialization_failed', details: "Not a valid origin for the client: https://recensi…egister this origin for your project's client ID."}details: "Not a valid origin for the client: https://mywebsite.com has not been registered for client ID xxxxxx.apps.googleusercontent.com. Please go to https://console.developers.google.com/ and register this origin for your project's client ID."error: "idpiframe_initialization_failed"[[Prototype]]: Object
(anonymous) @ cb=gapi.loaded_0?le=scs:115
setTimeout
_.nh @ cb=gapi.loaded_0?le=scs:115
(anonymous) @ cb=gapi.loaded_0?le=scs:155
Wj @ cb=gapi.loaded_0?le=scs:146
Promise.then
gk @ cb=gapi.loaded_0?le=scs:148
_.ik @ cb=gapi.loaded_0?le=scs:148
Ak @ cb=gapi.loaded_0?le=scs:154
jk @ cb=gapi.loaded_0?le=scs:153
(anonymous) @ cb=gapi.loaded_0?le=scs:148
(anonymous) @ cb=gapi.loaded_0?le=scs:252
xu.dispatchEvent @ cb=gapi.loaded_0?le=scs:167
_.yv.Nr @ cb=gapi.loaded_0?le=scs:206
(anonymous) @ cb=gapi.loaded_0?le=scs:199
_.g.iea @ cb=gapi.loaded_0?le=scs:191
(anonymous) @ cb=gapi.loaded_0?le=scs:194
iframe:1 
    
    
POST https://accounts.google.com/_/IdpIFrameHttp/cspreport/fine-allowlist 400 (Bad Request)

What I tried

I tried to update my htaccess with something like the following but I still got the same error messages:

<IfModule mod_headers.c>
Header set Content-Security-Policy "
    default-src 'self';
    script-src 'self' https://apis.google.com https://www.gstatic.com 'unsafe-inline' 'unsafe-eval' blob: data:;
    connect-src 'self' https://accounts.google.com;
    frame-src 'self' https://accounts.google.com https://www.gstatic.com;
    object-src 'none';
"
</IfModule>

I also tried added Authorized JavaScript origins for my stage website (which is live on the internet) but no change here either.

Questions

Can anyone please let me know how to fix this? Do the server providor need to change anything or am I missing something?

I’m trying to write a JavaScript script to add an attribute (data-cy) to all actionable elements (button, input, a, etc.) across Angular templates in my app using the Cheerio library. However, I’m encountering the following issues:

Unwanted <html>, <head>, and <body> tags
When Cheerio loads the HTML fragments, it wraps them in , , and tags. This breaks the Angular template structure.

Unintended modifications
Angular directives and bindings like are being converted to invalid formats, such as <input [formcontrol]>. This makes the app fail to compile.

Issues with custom Angular components
When loading HTML files as XML (xmlMode: true), Cheerio does not recognize Angular custom tags. For example:

<app-navbar id="navbar" *ngIf="_router.url !== 'login'"></app-navbar>

and turn them to self closing tags like that

<app-navbar id="navbar" *ngIf="_router.url !== 'login'"/>

The app contains a large number of files, so manually handling each case isn’t feasible.

Here’s a simplified version of my code:

const processHtmlFileArray = (htmlFileArray) => {
    // Define the array of actionable elements
    const actionableElementArray = ["button", "input", "a", "textarea", "mat-select"];
    // Join the array to create a CSS selector string
    const selector = actionableElementArray.join(", ");
    // loop to each HTML file
    htmlFileArray.forEach((filePath) => {
        const fileName = path.basename(filePath, ".html");
        // Extract file name 
        let fileContent = readHtmlFile(filePath);
        //if ( fileName == "test") console.log(fileContent);
        // Parse HTML with Cheerio (do not add `html`/`body` tags)
        const htmlParser = cheerio.load(fileContent, {
            xmlMode: true,
            decodeEntities: false, // Prevent character escaping
            normalizeWhitespace: false // Retain original formatting
        });
        //if ( fileName == "test") console.log(htmlParser.html());
        // Identify Actionable Elements
        const IdentifiedActionableElement = htmlParser(selector);  
        //if ( fileName == "test") console.log(actionableElementArray);
        IdentifiedActionableElement.each((index, element) => {
            // Get the tag name 
            const tagName = htmlParser(element).prop("tagName").toLowerCase();
            const elementId = htmlParser(element).attr("id") || "";
            // Generate data-cy attribute
            const dataCy = generateDataCyAttribute(fileName, tagName, elementId);
            htmlParser(element).attr("data-cy", dataCy);  
        });
        const updatedHtml = htmlParser.html();
        // Write the updated HTML to the file
        writeUpdatedHtmlFile(filePath, updatedHtml);
    });
};

What I’ve Tried
Setting xmlMode: true to preserve custom elements:

const htmlParser = cheerio.load(fileContent, {
    xmlMode: true,
    decodeEntities: false,
    normalizeWhitespace: false,
})

Question

Is there a way to configure Cheerio to handle Angular templates correctly, or is there an alternative MIT-licensed library better suited for this use case?

Is it possible to Adding Flutter to plain HTML/CSS + JS?

Is it possible to Adding Flutter to plain HTML/CSS + JS
Embedded mode:-
Flutter web applications can also render content into an arbitrary number of elements (commonly divs) of another web application; this is called “embedded mode” (or “multi-view”).

Flutter views and web content can be composed to produce a web application in different ways. Choose one of the following depending on your use-case:
Adding Flutter views to an existing web application (embedded mode)

I am using Term Reference Fancytree Drupal module to render a vocabulary in hierarchal fashion on the content edit form. It has the below structure:

Product 1
  Feature 1
    Yes
    No
    Unknown
Product 2
  Feature 2
    Yes
    No
    Unknown
Product 3
  Feature 3
    Yes
    No
    Unknown

and so on and so for. The leaf nodes (Yes/No/Unknown) are checkboxes and I have restricted them to single select from the backend, so content editors can select only one of the leaf nodes.

My client has more options coming in for the leaf nodes and therefore wants them to display as a dropdown. This does not seem to be possible to achieve in Drupal. Can someone guide me how it can be done via JS or may be using some events of Fancytree?

Any help much appreciated.

In a project’s code I was working on, I found that a former developer had mistakenly passed the parsing format string as “dd-MM-YYYY” instead of “DD-MM-YYYY” to moment.js method to parse the date string.
Instead of giving an error to the developer while parsing, due to error in parsing format string, the moment.js was putting the day in the date as 01 of that particular month.
I just want to suggest to moment.js guys that if the parsing string is out of format then the library should throw an error rather than assuming some default value. Because the dates are critical to any application. And if some default value is given in date even after parsing format mismatch, the developer might not recognise it.
Do share your thoughts on this guys.
Thanks!

Currently I have a Vite project that buids a react app:

The Vite config looks like this:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

// Vite config
export default defineConfig({
  plugins: [
    react(),
  ],
});

and it takes all the code from /src/main.tsx entry point and then generates an output like this:

dist/assets/index-[hash].js
dist/assets/index-[hash].css
dist/index.html

I do not have an index.html defined anywhere in fact it is auto generated and includes the important <script type="module" crossorigin src="/assets/index-CSOHzRbG.js"></script> and <link rel="stylesheet" crossorigin href="/assets/index-Lja8sGTP.css">.

Now I’d like to have an output like this:

dist/assets/index-[hash].js
dist/assets/index-[hash].css
dist/index.html
dist/my-other-script.js

Based on:

...
src/main.tsx
src/my-other-script.ts

I tried what chatgpt recommends which is to add a build rollup info like this:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

// Vite config
export default defineConfig({
  plugins: [
    react(),
  ],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'src/main.tsx'), // React app entry point
        contentScript: resolve(__dirname, 'src/my-other-script.ts'), // Content script entry point
      },
      output: {
        entryFileNames: (chunkInfo) =>
          chunkInfo.name === 'contentScript' ? 'content-script.js' : 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',  // Ensure chunk files also have hashed names
        assetFileNames: 'assets/[name].[hash][extname]', // Hash assets (CSS, images)
      },
    },
    outDir: 'dist', // Output directory
    assetsDir: 'assets', // Folder for assets like CSS, images
  },
});

However, while that works for all the script. The .html file is not generated anymore, this is the new output:

dist/assets/index-[hash].js
dist/assets/index-[hash].css
dist/my-other-script.js

Do you know how to preserve the default bundling including the index.html generation intact but also have a separate flow bundling and outputting src/my-other-script.ts.

Thank you!

According to the layout, the shader should be divided into 6 columns and 3 rows with dimensions of 100vw up by 100vh. The sizes of the rows should be divided evenly proportionally by height. The problem is that the width of the shader segments is different and should be in proportions of 17.65vw, 16.25vw, 16.32vw, 16.32vw, 16.25vw, 17.15vw from left to right. At the moment they are the same width and I can not achieve the desired result.

I had never worked with THREE before and wrote using basic information and ChatGPT. Here is my code:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./index.css?v=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <title>Shader</title>
</head>
<body>
<main>
    <canvas style="display: block;position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;" id="canvas"></canvas>
</main>
  <script src="./js/shader.js"></script>
</body>
</html>

// Initializing the scene, camera, and renderer
const canvas = document.getElementById('canvas');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
const scene = new THREE.Scene();

// Camera
const camera = new THREE.OrthographicCamera(
    window.innerWidth / -2, window.innerWidth / 2,
    window.innerHeight / 2, window.innerHeight / -2,
    0.1, 1000
);
camera.position.z = 1;  // Camera is positioned close to the plane

// Window resize handler
window.addEventListener('resize', () => {
    const width = window.innerWidth;
    const height = window.innerHeight;
    renderer.setSize(width, height);
    camera.left = width / -2;
    camera.right = width / 2;
    camera.top = height / 2;
    camera.bottom = height / -2;
    camera.updateProjectionMatrix();
    material.uniforms.resolution.value.set(width, height);
});

// Shaders
const vertexShader = `
    varying vec2 vUv;
    void main() {
        vUv = uv;
        vec4 modelPosition = modelMatrix * vec4(position, 1.0);
        vec4 viewPosition = viewMatrix * modelPosition;
        vec4 projectionPosition = projectionMatrix * viewPosition;
        gl_Position = projectionPosition;
    }
`;

const fragmentShader = `
    uniform float time;
    uniform vec2 resolution;
    uniform vec2 pointer;
    varying vec2 vUv;

    // Color palette for the effect
    vec3 palette(float t) {
        vec3 a = vec3(0.5, 0.5, 0.5);
        vec3 b = vec3(0.5, 0.5, 0.5);
        vec3 c = vec3(1.0, 1.0, 1.0);
        vec3 d = vec3(0.263, 0.416, 0.557);
        return a + b * cos(6.28318 * (c * t + d));
    }

    void main() {
        vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / resolution.y;
        vec2 uv0 = uv;
        vec3 finalColor = vec3(0.0);

        // Restrict UV coordinates for a 6x3 grid
        vec2 gridSize = vec2(6.0, 3.0);  // 6x3 grid
        vec2 gridPos = floor(vUv * gridSize);  // Get grid position
        vec2 localUv = fract(vUv * gridSize) - 0.5;  // Local coordinates within the block

        // Apply distortion
        uv = sin(localUv * 0.5) - pointer;  // Distortion depends on pointer position
        float d = length(uv) * exp(-length(uv0));  // Effect based on distance
        vec3 col = palette(length(uv0) + time * 0.4);  // Color with animation

        // Animation
        d = sin(d * 8.0 + time) / 8.0;  // Adjust speed and direction of effect
        d = abs(d);
        d = pow(0.02 / d, 2.0);

        finalColor += col * d;  // Multiply color by the effect

        // Output the final color
        gl_FragColor = vec4(finalColor, 1.0);
    }
`;

// Shader material
const uniforms = {
    time: { value: 0 },
    resolution: { value: new THREE.Vector2(window.innerWidth, window.innerHeight) },
    pointer: { value: new THREE.Vector2(0, 0) }
};

const material = new THREE.ShaderMaterial({
    vertexShader,
    fragmentShader,
    uniforms
});

// Width proportions for each segment
const columnRatios = [17.65, 16.25, 16.32, 16.32, 16.25, 17.15]; // Defined column width proportions
const rowCount = 3; // 3 rows
const rowHeight = window.innerHeight / rowCount; // Row height (100vh / 3)

// Function to create geometry with a 6x3 grid
function recreateGeometry() {
    // Remove old geometry
    if (plane) {
        scene.remove(plane);
        plane.geometry.dispose();
    }

    const geometry = new THREE.BufferGeometry();
    const vertices = [];
    const uvs = [];

    let xOffset = -window.innerWidth / 2; // Start from the left edge of the screen

    // Create segments for columns with unique widths
    columnRatios.forEach((columnWidthPercent) => {
        const columnWidth = (columnWidthPercent / 100) * window.innerWidth;  // Convert percentages to pixels
        let yOffset = -window.innerHeight / 2;  // Start from the top edge of the screen

        // Generate vertices and UV coordinates for each column
        for (let i = 0; i < rowCount; i++) {
            const x1 = xOffset;
            const x2 = xOffset + columnWidth;
            const y1 = yOffset;
            const y2 = yOffset + rowHeight;

            // Vertices
            vertices.push(
                x1, y1, 0, x2, y1, 0, x2, y2, 0,
                x1, y1, 0, x2, y2, 0, x1, y2, 0
            );

            // UV coordinates accounting for each segment's width
            const u1 = (x1 + window.innerWidth / 2) / window.innerWidth;
            const u2 = (x2 + window.innerWidth / 2) / window.innerWidth;
            const v1 = (y1 + window.innerHeight / 2) / window.innerHeight;
            const v2 = (y2 + window.innerHeight / 2) / window.innerHeight;

            uvs.push(
                u1, v1, u2, v1, u2, v2,
                u1, v1, u2, v2, u1, v2
            );

            yOffset += rowHeight;  // Increment by row height
        }

        // Shift xOffset for the next column
        xOffset += columnWidth;
    });

    // Set attributes for geometry
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
    geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

    // Create mesh and add it to the scene
    plane = new THREE.Mesh(geometry, material);
    scene.add(plane);
}

let plane;
recreateGeometry();

// Animation
const clock = new THREE.Clock();
function animate() {
    const delta = clock.getDelta();  // Get elapsed time between frames
    uniforms.time.value += delta;  // Use delta for smooth animation
    renderer.render(scene, camera);
    requestAnimationFrame(animate);
}

animate();

// Mouse movement tracking and smoothing animation
let targetPointer = new THREE.Vector2(0, 0); // Target pointer position

window.addEventListener('mousemove', (event) => {
    const pointerX = (event.clientX / window.innerWidth) * 2 - 1;
    const pointerY = -(event.clientY / window.innerHeight) * 2 + 1;
    targetPointer.set(pointerX, pointerY);
});

// Smooth pointer movement
function smoothPointer() {
    uniforms.pointer.value.lerp(targetPointer, 0.1);  // Smoothly update pointer
    requestAnimationFrame(smoothPointer);
}

smoothPointer();

Please, are there any experts on this issue who can help me solve this problem?

Hi im trying to build guacamole-client locally on my system but im getting error in frontend dependencies. I’ve tried updating the libraries but still not able to build it. I’m getting below error:

  INFO] [1mReactor Summary for guacamole-client 1.6.0:[m
[INFO] 
[INFO] guacamole-client ................................... [1;32mSUCCESS[m [ 28.211 s]
[INFO] guacamole-common ................................... [1;32mSUCCESS[m [  4.123 s]
[INFO] guacamole-ext ...................................... [1;32mSUCCESS[m [  2.886 s]
[INFO] guacamole-common-js ................................ [1;32mSUCCESS[m [  9.941 s]
[INFO] guacamole .......................................... [1;31mFAILURE[m [04:21 min]
[INFO] extensions ......................................... [1;33mSKIPPED[m
[INFO] guacamole-auth-ban ................................. [1;33mSKIPPED[m
[INFO] guacamole-auth-duo ................................. [1;33mSKIPPED[m
[INFO] guacamole-auth-header .............................. [1;33mSKIPPED[m
[INFO] guacamole-auth-jdbc ................................ [1;33mSKIPPED[m
[INFO] guacamole-auth-jdbc-base ........................... [1;33mSKIPPED[m
[INFO] guacamole-auth-jdbc-mysql .......................... [1;33mSKIPPED[m
[INFO] guacamole-auth-jdbc-postgresql ..................... [1;33mSKIPPED[m
[INFO] guacamole-auth-jdbc-sqlserver ...................... [1;33mSKIPPED[m
[INFO] guacamole-auth-jdbc-dist ........................... [1;33mSKIPPED[m
[INFO] guacamole-auth-json ................................ [1;33mSKIPPED[m
[INFO] guacamole-auth-ldap ................................ [1;33mSKIPPED[m
[INFO] guacamole-auth-quickconnect ........................ [1;33mSKIPPED[m
[INFO] guacamole-auth-restrict ............................ [1;33mSKIPPED[m
[INFO] guacamole-auth-sso ................................. [1;33mSKIPPED[m
[INFO] guacamole-auth-sso-base ............................ [1;33mSKIPPED[m
[INFO] guacamole-auth-sso-cas ............................. [1;33mSKIPPED[m
[INFO] guacamole-auth-sso-openid .......................... [1;33mSKIPPED[m
[INFO] guacamole-auth-sso-saml ............................ [1;33mSKIPPED[m
[INFO] guacamole-auth-sso-ssl ............................. [1;33mSKIPPED[m
[INFO] guacamole-auth-sso-dist ............................ [1;33mSKIPPED[m
[INFO] guacamole-auth-totp ................................ [1;33mSKIPPED[m
[INFO] guacamole-history-recording-storage ................ [1;33mSKIPPED[m
[INFO] guacamole-vault .................................... [1;33mSKIPPED[m
[INFO] guacamole-vault-base ............................... [1;33mSKIPPED[m
[INFO] guacamole-vault-ksm ................................ [1;33mSKIPPED[m
[INFO] guacamole-vault-dist ............................... [1;33mSKIPPED[m
[INFO] guacamole-display-statistics ....................... [1;33mSKIPPED[m
[INFO] guacamole-example .................................. [1;33mSKIPPED[m
[INFO] guacamole-playback-example ......................... [1;33mSKIPPED[m
[INFO] [1m------------------------------------------------------------------------[m
[INFO] [1;31mBUILD FAILURE[m
[INFO] [1m------------------------------------------------------------------------[m
[INFO] Total time:  05:10 min
[INFO] Finished at: 2024-12-18T17:41:25+05:30
[INFO] [1m------------------------------------------------------------------------[m
[ERROR] Failed to execute goal [32mcom.github.eirslett:frontend-maven-plugin:1.12.0:npm[m [1m(npm-build)[m on project [36mguacamole[m: [1;31mFailed to run task[m: 'npm run build --verbose' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1) -> [1m[Help 1][m
org.apache.maven.lifecycle.LifecycleExecutionException: Failed to execute goal [32mcom.github.eirslett:frontend-maven-plugin:1.12.0:npm[m [1m(npm-build)[m on project [36mguacamole[m: [1;31mFailed to run task[m
    at org.apache.maven.lifecycle.internal.MojoExecutor.doExecute2(MojoExecutor.java:333)
    at org.apache.maven.lifecycle.internal.MojoExecutor.doExecute(MojoExecutor.java:316)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:212)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:174)
    at org.apache.maven.lifecycle.internal.MojoExecutor.access$000(MojoExecutor.java:75)
    at org.apache.maven.lifecycle.internal.MojoExecutor$1.run(MojoExecutor.java:162)
    at org.apache.maven.plugin.DefaultMojosExecutionStrategy.execute(DefaultMojosExecutionStrategy.java:39)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:159)
    at org.apache.maven.lifecycle.internal.MojoExecutor.executeForkedExecutions(MojoExecutor.java:448)
    at org.apache.maven.lifecycle.internal.MojoExecutor.doExecute(MojoExecutor.java:311)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:212)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:174)
    at org.apache.maven.lifecycle.internal.MojoExecutor.access$000(MojoExecutor.java:75)
    at org.apache.maven.lifecycle.internal.MojoExecutor$1.run(MojoExecutor.java:162)
    at org.apache.maven.plugin.DefaultMojosExecutionStrategy.execute(DefaultMojosExecutionStrategy.java:39)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute(MojoExecutor.java:159)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:105)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject(LifecycleModuleBuilder.java:73)
    at org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build(SingleThreadedBuilder.java:53)
    at org.apache.maven.lifecycle.internal.LifecycleStarter.execute(LifecycleStarter.java:118)
    at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:261)
    at org.apache.maven.DefaultMaven.doExecute(DefaultMaven.java:173)
    at org.apache.maven.DefaultMaven.execute(DefaultMaven.java:101)
    at org.apache.maven.cli.MavenCli.execute(MavenCli.java:906)
    at org.apache.maven.cli.MavenCli.doMain(MavenCli.java:283)
    at org.apache.maven.cli.MavenCli.main(MavenCli.java:206)
    at java.base/jdk.internal.reflect.DirectMethodHandleAccessor.invoke(DirectMethodHandleAccessor.java:103)
    at java.base/java.lang.reflect.Method.invoke(Method.java:580)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced(Launcher.java:255)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launch(Launcher.java:201)
    at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode(Launcher.java:361)
    at org.codehaus.plexus.classworlds.launcher.Launcher.main(Launcher.java:314)
Caused by: org.apache.maven.plugin.MojoFailureException: Failed to run task
    at com.github.eirslett.maven.plugins.frontend.mojo.AbstractFrontendMojo.execute(AbstractFrontendMojo.java:100)
    at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo(DefaultBuildPluginManager.java:126)
    at org.apache.maven.lifecycle.internal.MojoExecutor.doExecute2(MojoExecutor.java:328)
    ... 31 more
Caused by: com.github.eirslett.maven.plugins.frontend.lib.TaskRunnerException: 'npm run build --verbose' failed.
    at com.github.eirslett.maven.plugins.frontend.lib.NodeTaskExecutor.execute(NodeTaskExecutor.java:63)
    at com.github.eirslett.maven.plugins.frontend.mojo.NpmMojo.execute(NpmMojo.java:62)
    at com.github.eirslett.maven.plugins.frontend.mojo.AbstractFrontendMojo.execute(AbstractFrontendMojo.java:94)
    ... 33 more
Caused by: com.github.eirslett.maven.plugins.frontend.lib.ProcessExecutionException: org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1)
    at com.github.eirslett.maven.plugins.frontend.lib.ProcessExecutor.execute(ProcessExecutor.java:82)
    at com.github.eirslett.maven.plugins.frontend.lib.ProcessExecutor.executeAndRedirectOutput(ProcessExecutor.java:64)
    at com.github.eirslett.maven.plugins.frontend.lib.NodeExecutor.executeAndRedirectOutput(NodeExecutor.java:29)
    at com.github.eirslett.maven.plugins.frontend.lib.NodeTaskExecutor.execute(NodeTaskExecutor.java:58)
    ... 35 more
Caused by: org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1)
    at org.apache.commons.exec.DefaultExecutor.executeInternal(DefaultExecutor.java:404)
    at org.apache.commons.exec.DefaultExecutor.execute(DefaultExecutor.java:166)
    at com.github.eirslett.maven.plugins.frontend.lib.ProcessExecutor.execute(ProcessExecutor.java:74)
    ... 38 more
[ERROR] 
[ERROR] 
[ERROR] For more information about the errors and possible solutions, please read the following articles:
[ERROR] [1m[Help 1][m http://cwiki.apache.org/confluence/display/MAVEN/MojoFailureException
[ERROR] 
[ERROR] After correcting the problems, you can resume the build with the command
[ERROR]   [1mmvn <args> -rf :guacamole[m
[DEBUG] Shutting down adapter factory; available factories [file-lock, rwlock-local, semaphore-local, noop]; available name mappers [discriminating, file-gav, file-hgav, file-static, gav, static]
[DEBUG] Shutting down 'file-lock' factory
[DEBUG] Shutting down 'rwlock-local' factory
[DEBUG] Shutting down 'semaphore-local' factory
[DEBUG] Shutting down 'noop' factory

Also this is my webpack.config.js file content:

const AngularTemplateCacheWebpackPlugin = require('angular-templatecache-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const DependencyListPlugin = require('./plugins/dependency-list-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    bail: true,
    mode: 'production',
    stats: 'detailed',

    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'guacamole.[contenthash].js',
    },

    devtool: 'source-map',

    entry: './src/app/index/indexModule.js',

    module: {
        rules: [
            {
                test: /.js$/i,
                exclude:/node_modules/(?!(yaml)/).*/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env']],
                    },
                },
            },
            {
                test: /.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            import: false,
                            url: false,
                        },
                    },
                ],
            },
            {
                test: require.resolve('angular'),
                loader: 'exports-loader',
                options: {
                    type: 'commonjs',
                    exports: 'single window.angular',
                },
            },
        ],
    },
    

    optimization: {
        minimize: true,
        minimizer: [ 
            new TerserPlugin({
              terserOptions: {
                compress: { drop_console: true },
                output: { comments: false },
              },
              extractComments: false,
            }),
    ],
        splitChunks: {
            cacheGroups: {
                styles: {
                    name: 'styles',
                    test: /.css$/,
                    chunks: 'all',
                    enforce: true,
                },
            },
        },
    },

    plugins: [
        new AngularTemplateCacheWebpackPlugin({
            module: 'templates-main',
            root: 'app/',
            source: 'src/app/**/*.html',
            standalone: true,
        }),
        new CleanWebpackPlugin(),
        new CopyPlugin({
            patterns: [
                { from: 'app/**/*', context: path.resolve(__dirname, 'src') },
                { from: 'fonts/**/*', context: path.resolve(__dirname, 'src') },
                { from: 'images/**/*', context: path.resolve(__dirname, 'src') },
                { from: 'layouts/**/*', context: path.resolve(__dirname, 'src') },
                { from: 'manifest.json', context: path.resolve(__dirname, 'src') },
                { from: 'translations/**/*', context: path.resolve(__dirname, 'src') },
                { from: 'verifyCachedVersion.js', context: path.resolve(__dirname, 'src') },
            ],
        }),
        new CopyPlugin({
            patterns: [
                { from: 'angular/angular.min.js', context: path.resolve(__dirname, 'node_modules') },
                { from: 'blob-polyfill/Blob.js', context: path.resolve(__dirname, 'node_modules') },
                { from: 'datalist-polyfill/datalist-polyfill.min.js', context: path.resolve(__dirname, 'node_modules') },
                { from: 'jquery/dist/jquery.min.js', context: path.resolve(__dirname, 'node_modules') },
                { from: 'lodash/lodash.min.js', context: path.resolve(__dirname, 'node_modules') },
            ],
        }),
        new HtmlWebpackPlugin({
            inject: false,
            template: 'src/index.html',
        }),
        new MiniCssExtractPlugin({
            filename: 'guacamole.[contenthash].css',
            chunkFilename: '[id].guacamole.[contenthash].css',
        }),
        new DependencyListPlugin(),
        new webpack.ProvidePlugin({
            jstz: 'jstz',
            Pickr: '@simonwep/pickr',
            saveAs: 'file-saver',
            process: 'process/browser.js',
            Buffer: ['buffer', 'Buffer'],
        }),
    ],

    resolve: {
        modules: ['src', 'node_modules'],
    },
};

I need the solution to build this locally so that I can make frontend and backend changes in it.

I am very curious on how does electron detects an operating system locale given it provided no way to set it manually.

I had this bizzare case on one of the machine that was set as en-US on its region and language configuration but navigator.language always shows en-GB. I have checked the navigator.language on both Chrome (131) and Firefox (134.0b) in Windows 10 version 1809 and they respected the region configuration.

I have a grid and I want to use JavaScript code to move it up, down, left, right

enter image description here

Is there a master who can write me a complete code

I need a complete code using HTML and JavaScript

In weblogic, we have cluster environment having 6 managed servers(all are up and running).

whenever i’m accessing application url i wanted to know request is going to which manged server(by using inspect element or any other way),

To know the server details is their any configuration we have to do in weblogic,application/ any other to archive this.

basically i have to check the managed server logs based on that user logged.

Thanks in advance.

I got assigned with writing unit tests for a class that instantiate a Worker inside in it’s constructor. The code looks simmilar to this,

class SomeClass {
  private _worker: Worker;
  constructor(flag: number) {
    this._worker = this.createWorker(flag);
    this.onmessage();
  }

  private createWorker(flag: number) {
    switch (flag) {
      case 1:
        return new Worker('possibly different url');

      case 2:
        return new Worker('possibly different url');

      default:
        return new Worker('possibly different url');
    }
  }

  private onmessage() {
    this._worker.onmessage = () => {
      this.somefunction();
    };
  }
  private somefunction() {
    //some code
  }
}

To test this, I tried implementing a FakeWorker class and assigned this definition into window.Worker attribute by using the following code in beforeAll and afterAll

/*before all*/
actualWorkerDefinition=window.Worker
window.Worker=FakeWorker

/*after all*/
window.Worker=ActualWorkerDefinition

This helped me write the test cases for SomeClass without any issue. So My question is: Does overriding window.Worker considered dangerous?

One of my team members also suggested that I can use an iframe instead of this approch and create the actual worker using that. That is a bit cumbersome for a unit test and will require linking actual js file in the project that has no relationship to this code. Would like to know advantages and disadvantages on this approach as well.

Would also like to know whether there are some alternative approaches to this.

I’m hoping to get Embla Carousel setup in my Vue project, but I can’t get the scrollNext function to work.

Here’s where I am:

<script setup>
import { onMounted } from 'vue'
import emblaCarouselVue from 'embla-carousel-vue'
import Autoplay from 'embla-carousel-autoplay'

const [emblaRef, emblaApi] = emblaCarouselVue({ loop: true }, [Autoplay()])

function prevSlide () {
  emblaApi.value.scrollPrev()
}

function nextSlide () {
  emblaApi.value.scrollNext()
} 
</script>

<template>
  <div class="embla" ref="emblaRef">
    <div class="embla__viewport">
      <div class="embla__container">
        <div class="embla__slide">
          <div class="embla__parallax">
            <div class="embla__parallax__layer">
              <img
                class="embla__slide__img embla__parallax__img"
                src="https://picsum.photos/1000/350?v=1"
                alt="Your alt text"
              />
            </div>
          </div>
        </div>
...
    <button @click="prevSlide">Prev</button>
    <button @click="nextSlide">Next</button>

You can view the project using this codesandbox. The ideal solution would allow me to leverage the parallax effect as seen in the embla docs.

I am working on generating meta tags for product details page to show the preview when the link is shared on social media platforms, i can see the tags are loading but still i can’t see preview according to data that is passed.

 export async function generateMetadata({ params }) {
  const productID = params?.id;
 
  const productDetail = await GetProductDetail(productID).catch(() => null);

  const { name,store, description, media } = productDetail.data?.data;
  return {
    title: `${name} | ${store.name}`,
    description: description || "Check out this amazing product!",
    openGraph: {
      title: name || "Product Detail",
      description: description || "Check out this amazing product!",
      images: media?.[0]?.media || "/default-image.jpg", 
      type: "website",
      site_name: "Stocks Maze",
      url:`${process.env.NEXT_PUBLIC_HOST_ADDRESS}/buyer/product-detail/${productID}`
    },
    twitter: {
      card: "summary",
      title: `${name} | ${store.name}` ,
      description: description,
      images: media?.[0]?.media ,

    },
  };
}