Category: javascript

redux-BkxX5gv2.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'useLayoutEffect')
at Be (redux-BkxX5gv2.js:1:2040)
at redux-BkxX5gv2.js:1:2071
Be @ redux-BkxX5gv2.js:1
(anonymous) @ redux-BkxX5gv2.js:1

• getting this error after take build and host in hostinger
• project was work fine before suddenly got this error
• how fix this problem loachost don’t showing any kind of error?s

I have nested alpine.js x-data tags, where the nested tag depends on the parent, like the following:

<div x-data="{foo: 1234}">
  <input x-model="foo" type="number">
  <div x-text="`foo = ${foo}`"></div>
  <div x-data="{bar: [foo*1, foo*2, foo*3]}">
    <template x-for="point in bar">
      <div x-text="point"></div>
    </template>
  </div>
</div>

At the moment, it starts okay, with the output showing:

foo = 1234
1234
2468
3702

However, upon changing the input, the bar values do not update:

foo = 1235
1234
2468
3702

Is it possible to have the nested x-data bar value update dynamically when foo is changed in the parent?

Here is a working example: https://codepen.io/manticorp/pen/RNPBrPK

I’ve been building a project of creating a webpage design from an image of that page. Most of the application for this purpose uses AI but I am not using them. I went for a complete raw approach with computer vision. I detected text from image using tesseract with its bboxes (bounding boxes – spatial data like {x0, y0, x1, y1} – Here {x0, y0} is top left pixel coodinate and {x1, y1} is the bottom right), I then inpainted the text from the image, used sobel algorithm to detect edges and found their bboxes. It’s not perfect but has worked till here, I then arranged these datas in the proper parent-child heirarchy as json data. Now I only need to arrange this data as html.

Here is an example of the JSON data – heirarchyTree:

[
  {
    "element": "div",
    "text": "",
    "bbox": { "x0": 0, "y0": 0, "x1": 1459, "y1": 1091 },
    "color": "",
    "bgColor": { "r": 0, "g": 0, "b": 0, "a": 0 },
    "children": [
      {
        "element": "div",
        "text": "",
        "bbox": { "x0": 13, "y0": 13, "x1": 1447, "y1": 869 },
        "color": "",
        "bgColor": { "r": 255, "g": 255, "b": 255, "a": 255 },
        "children": [
          {
            "element": "p",
            "text": "24" Infinora",
            "bbox": { "x0": 591, "y0": 29, "x1": 865, "y1": 72 },
            "color": { "r": 0, "g": 0, "b": 0, "a": 255 },
            "bgColor": "",
            "children": [
              {
                "element": "p",
                "text": "4",
                "bbox": { "x0": 739, "y0": 30, "x1": 749, "y1": 39 },
                "color": { "r": 255, "g": 255, "b": 255, "a": 255 },
                "bgColor": "",
                "children": []
              }
            ]
          },
          {
            "element": "div",
            "text": "",
            "bbox": { "x0": 598, "y0": 55, "x1": 632, "y1": 94 },
            "color": "",
            "bgColor": { "r": 107, "g": 107, "b": 107, "a": 255 },
            "children": []
          },
 ....

First I arranged them using position, which works but I can’t move forward with that. No one using an image to html convertor wants their html to be div’s and p tags in the same level arranged inside a single parent div using position absolute right. What I tried to do was first arrange these in an order by how we humans design a component. I tried to come up with an ordering method where the basic idea is we find the components with the smallest x0 and other with smallest y0 which are more smaller y and x respectively. Then I compare the y1 of the one with the smallest y0 and y0 of the one with the smallest x0 to see which has more priority and choose it. Based on this I arranged the children recursively. Then I used another function to give it a layout direction as, if a child has x0 greater than the previous child in order he is in a row else column (for flex based arrangement). Then I wrote a generateCode function. I will provide these functions below

function sortChildrenByDirection(contourTreeNode) {
  if (!contourTreeNode.children || contourTreeNode.children.length === 0) {
    return;
  }

  contourTreeNode.children.sort((a, b) => {
    const aBox = a.bbox;
    const bBox = b.bbox;

    const lowestY0 = Math.min(aBox.y0, bBox.y0);
    const isATopmost = aBox.y0 === lowestY0;
    const isBTopmost = bBox.y0 === lowestY0;

    const lowestX0 = Math.min(aBox.x0, bBox.x0);
    const isALeftmost = aBox.x0 === lowestX0;
    const isBLeftmost = bBox.x0 === lowestX0;

    if (aBox.y0 === bBox.y0 && aBox.x0 === bBox.x0) {
      return 0;
    }

    if (isATopmost && isALeftmost && !(isBTopmost && isBLeftmost)) {
      return -1;
    }
    if (isBTopmost && isBLeftmost && !(isATopmost && isALeftmost)) {
      return 1;
    }

    if (isATopmost && isBLeftmost) {
      if (aBox.y1 < bBox.y0) {
        return -1;
      }
      else if (bBox.x1 < aBox.x0) {
        return 1;
      }
      else {
        return aBox.y0 - bBox.y0;
      }
    }

    if (isBTopmost && isALeftmost) {
      if (bBox.y1 < aBox.y0) {
        return 1;
      }
      else if (aBox.x1 < bBox.x0) {
        return -1;
      }
      else {
        return aBox.y0 - bBox.y0;
      }
    }

    if (aBox.y0 === bBox.y0) {
      return aBox.x0 - bBox.x0;
    }

    if (aBox.x0 === bBox.x0) {
      return aBox.y0 - bBox.y0;
    }

    const yDiff = aBox.y0 - bBox.y0;
    if (Math.abs(yDiff) > 10) {
      return yDiff;
    } else {
      return aBox.x0 - bBox.x0;
    }
  });

  contourTreeNode.children.forEach(sortChildrenByDirection);
}

function determineAlignment(node) {
  let children = node.children;

  let primaryNode = children[0];
  if (primaryNode) primaryNode.layoutDirection = "column";
  for (let i = 1; i < children.length; ++i) {
    if (children[i].bbox.x0 >= primaryNode.bbox.x1) {
      children[i].layoutDirection = "row";
    } else {
      children[i].layoutDirection = "column";
    }
    primaryNode = children[i];
  }

  node.children.forEach(determineAlignment);
}

function generateCode(node, prevTop = 0, prevLeft = 0) {
  if (node.children.length < 1) return "";
  const children = node.children;
  let columns = ``;
  let maxPrevHeight = children[0].bbox.y1;
  
  let row = `${wrapper(
    children[0],
    generateCode(children[0], children[0].bbox.y1, children[0].bbox.x1),
    "element",
    prevLeft,
    prevTop
  )}`;
  
  for (let i = 1; i < children.length; ++i) {
    if (children[i].layoutDirection === "row") {
      maxPrevHeight = Math.max(maxPrevHeight, children[i].bbox.y1);
      row += wrapper(
        children[i],
        generateCode(children[i], children[i].bbox.y1, children[i].bbox.x1),
        "element",
        children[i - 1].bbox.x1,
        children[0].bbox.y0
      );
    } else {
      let rowEnd = wrapper(row, null, "flex", null, null);
      columns += rowEnd;
      row = `${wrapper(
        children[i],
        generateCode(children[i], children[i].bbox.y1, children[i].bbox.x1),
        "element",
        prevLeft,
        maxPrevHeight
      )}`;
    }
  }
  
  if (row) {
    columns += wrapper(row, null, "flex", null, null);
  }
  
  return wrapper(columns, null, "cover", null, null);
}

function wrapper(parent, child, type, prevX, topY) {
  if (type == "cover") {
    return `<div>${parent}</div>n`;
  } else if (type === "flex") {
    return `<div style="display: flex">${parent}</div>n`;
  } else if (type === "element") {
    return `<${parent.element} style="width: ${
      parent.bbox.x1 - parent.bbox.x0
    }px; height: ${parent.bbox.y1 - parent.bbox.y0}px; background-color: ${
      parent.bgColor
        ? `rgba(
            ${parent.bgColor.r},
            ${parent.bgColor.g},
            ${parent.bgColor.b},
            ${parent.bgColor.a}
          )`
        : `rgba(0, 0, 0, 0)`
    }; color: ${
      parent.color
        ? `rgba(${parent.color.r}, ${parent.color.g}, ${parent.color.b}, ${parent.color.a})`
        : `rgba(0, 0, 0, 0)`
    }; margin-left: ${parent.bbox.x0 - prevX}px; margin-top: ${
      parent.bbox.y0 - topY
    }px;">${child || parent.text || ''}</${parent.element}>
`;
  }
}

First of all the arrangement method I came up with was a failure and didn’t work on many cases. Even if it was successfull, the above generateCode function I came up with is not gonna work as intended as it will result in wrong margin arrangement. Sorry for being an amateur at this

I just want a way I can make arrange the data as a proper html which is about 70-80% accurate and easily configurable. There has to be a solution. You know those drag-and-drop page builder’s (like wix). They make a proper design from drag-and-drop creations. They must be using position data of each components a user places and then somehow makes a working page out of it.

Body
I’m building a kids’ poem and story website using React and Supabase. I have successfully implemented login/signup using Supabase auth.

What I’m trying to do:
I want to restrict access to certain pages (like /poems or /stories) only if the user is logged in. If they’re not logged in, they should be redirected to /login.
What I’ve done so far:
I have initialized Supabase client using the given keys.
I use supabase.auth.getSession() to check user status.
However, when I directly enter a protected route URL in the browser, it still shows the page before redirecting. Sometimes the session loads late or doesn’t work as expected.
Expected result:
Users should be redirected to the login page if they are not logged in — immediately, without showing the protected content for even a second.
What’s the best way to make route-level protection immediate and efficient using Supabase in a React app?

 const a1 = sheet["A1"] ? sheet["A1"].v : null;
 const b2 = sheet["B2"] ? sheet["B2"].v : null;
 const c3 = sheet["C3"] ? sheet["C3"].v : null;
 const a2 = sheet["A2"] ? sheet["A2"].v : null;
 if (isNaN(a1)) {
     return res.status(400).json({
         status: "error",
         message: "Cell A1 must contain a numeric value."
     });
 }
 if (typeof b2 !== "string") {
     return res.status(400).json({
         status: "error",
         message: "Cell B2 must contain a string value."
     });
 }
 if (isNaN(new Date(c3).getTime())) {
     return res.status(400).json({
         status: "error",
         message: "Cell C3 must contain a valid date."
     });
 }
 try {
     await sql.connect(dbConfig);
     await new sql.Request()
         .input('a1', sql.Float, Number(a1))
         .input('b2', sql.NVarChar, b2)
         .input('c3', sql.DateTime, Date(c3))
         .input('a2', sql.Float, Number(a2))
         .query('INSERT INTO PlantInputs (A1Value, B2Value, C3Value) VALUES (@a1, @b2, @c3)')
         .query('INSERT INTO PlantInputs (A1Value, B2Value, C3Value) VALUES (@a2, @b2, @c3)');

Body
I’m building a kids’ poem and story website using React and Supabase. I have successfully implemented login/signup using Supabase auth.

What I’m trying to do:
I want to restrict access to certain pages (like /poems or /stories) only if the user is logged in. If they’re not logged in, they should be redirected to /login.
What I’ve done so far:
I have initialized Supabase client using the given keys.
I use supabase.auth.getSession() to check user status.
However, when I directly enter a protected route URL in the browser, it still shows the page before redirecting. Sometimes the session loads late or doesn’t work as expected.
Expected result:
Users should be redirected to the login page if they are not logged in — immediately, without showing the protected content for even a second.
What’s the best way to make route-level protection immediate and efficient using Supabase in a React app?

I have multiple React/Vite apps, and one called App Shell which is the host of all of the module federated apps. Based on the route of the page I am loading a remote app using loadRemote function from @module-federation/runtime (the same thing happens when i use @module-federation/enhanced/runtime). This what my code looks like:

import { loadRemote } from '@module-federation/runtime';
import { ComponentType, useState, useEffect} from 'react';

import { RemoteModule } from 'types/federation';

export function useRemoteModule(name: string): ComponentType<any> | null {
  const [module, setModule] = useState<ComponentType<any> | null>(null);

  useEffect(() => {
    const loadModule = async () => {
      try {
        const module = await loadRemote<RemoteModule>(`${name}/App`);

        if (!module?.default) {
          throw new Error(`Module ${name} does not have a default export`);
        }
        setModule(() => module.default);
      } catch (e) {
        console.log(e, 'catch');
      }
    }

    loadModule();
  }, [name])

  return module;
}

export function RouteResolver({ routes }: RouteResolverProps) {
  const { '*': routeParams } = useParams();
  const configRoute = Object.keys(routes).find(
    (pathname: string) => matchPath(pathname, `/${routeParams}`)
  ) || '';

  const moduleName = getModuleName(routeParams, routes[configRoute]);

  const Module = useRemoteModule(moduleName || DEFAULT_MODULE);

  return (
    <Suspense>
      {Module ? <Module /> : null}
    </Suspense>
  );
} 

Everything works fine on Chrome/FF, but when I am using Safari I mostly get this error and the page crashes. For other times (rarely) the page loads successfully. Here is my error. I do not have much info about it.

ReferenceError: Cannot access uninitialized variable.
(anonymous function) — virtualExposes-Dh5dHcud.js:5

What can cause this issue, and is there a solution for this? I am using manifests.

If my component uses jsx: <div>Test</div>, it crashes, if I use React.createElemet('div', null, 'Test') it renders successfully.

I have tried writing a custom plugin that would change all the jsx into createElement. I have tried changing the both @module-federation/runtime and @module-federation/runtime/enhanced. Changed the config of federation, still no result

I want to pass a (HttpOnly) cookie to Google Apps Script doGet(e) endpoint (e.g. from fetch(...) on the client), but there doesn’t seem to be any way to retrieve incoming cookies/headers out of e.
I have tried logging all e properties using

function doGet(e) {
    return ContentService.createTextOutput(
        JSON.stringify(e)
    ).setMimeType(ContentService.MimeType.JSON);
}

and querying it with curl
curl -L --cookie "name=Jane" "$webapp_endpoint"
curl -L --header "Cookie: name=Jane" "$webapp_endpoint"

Responses had no cookie info at all.
Is it not possible to retrieve?

In JavaScript, you can introspect support for various internationalization functionality by use of static methods of the various classes namespaced under Intl. For example:

Intl.PluralRules.supportedLocalesOf(['pt', 'yue', 'hyw']) // ['pt', 'yue']
Intl.Segmenter.supportedLocalesOf(['pt', 'yue', 'hyw']) // ['pt']

Is there any equivalent way to introspect locale support for letter-case conversion (toLocaleLowerCase, toLocaleUpperCase), given that there is no equivalent namespaced class under Intl for these methods?

I’m not asking about feature detection, which can be done on an ad-hoc basis if you know how to feature detect specific characteristics of the locale:

const turkishIsSupported = 'i'.toLocaleUpperCase('tr') === 'İ'

However, checking like this for many locales requires lots of custom logic and knowing what features to test for, whereas I’m interested in a simple way of checking that a given locale is supported, without prior knowledge of that locale’s features.

Error – main.tsx:1 Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of “application/octet-stream”. Strict MIME type checking is enforced for module scripts per HTML spec.

I don’t know why I am getting this error but I have edited almost all files but unable to resolve it can somebody help me out with this

project – https://github.com/ayushi68/IskconSeva

I had tried to update package.json, index.ts , tsconfig.json and all files in the server to setup this but unable to get it

Please let me know if someone can figure out where the error actually occuring
the deployment was sucessful but unable to see any pages in site

I’m new to npm and I tried to start a new simple project. Initially it just had index.html with h1 Hello world. When I try to start a server using http-server ./index.html it works to some extent but when I try to open the path http://127.0.0.1:3131 it downloads a file instead of running an HTML in my browser.

The browser I am using is Chrome, I tried Mozilla but the result is the same.

I am new to learning frontend web dev and i am working on a simple pomodoro web app although it has many settings and states to keep track of i want to know if it’s common use to let functions modify global variables such as the settings variables directly or is it better to keep all the variables as properties to a ” status ” object and pass that object to functions
here are the starter variables i have with the second approach

  timer: {
    pomoCount: 0,
    currCycle: 0,
    timerDisp: { min: 25, sec: 0 },
    totalSec: 25 * 60,
    over: 0,
    paused: 1,
    countDown : null  
  },
  task: {
    tskShown: 0,
    taskList: [],
  },
  settings: {
    lbInterval: 4,
    cycleList: [25, 5, 15],
    autoCheckTsk: 0,
    autoSwitchTsk: false,
    autoStrtPomo: false,
    autoStrtBrk: false,
  },
};``` 

When I write this code”

const selenium = require(“selenium-webdriver”)

myFirstTest = async function(){
console.log("hello");
};

I should receive a “hello” output after I execute line below, but I get nothing.

PS C:Selenium Automation1_Selenium Test> node ./index.js

How else can I call this function to give the output I’m looking for??

I trying to learn frida so I’m doing some basic tutorial from the web.

This is the script I’ve written:

Java.perform(function() {
    const MainActivity = Java.use('group.cognisys.fridame.MainActivity');
    
    MainActivity.isAdmin.implementation = function () {
        console.log("Hooking isAdmin Method...");   // print a message on our terminal
        return true;
    };
});

As you can see it’s quite basic.
I’m running the command “frida -U -l my_script.js -f group.cognisys.fridame” from my Windows that has version “17.1.5”.
The server is an android emulator of Pixel 6, with Android 14, version 17.1.5 of the frida-server, and it’s also rooted.

The full error stack:

Spawned `group.cognisys.fridame`. Resuming main thread!
TypeError: not a function
    at <anonymous> (/frida/bridges/java.js:8)
    at <anonymous> (/frida/bridges/java.js:1)
    at _performPendingVmOpsWhenReady (/frida/bridges/java.js:8)
    at perform (/frida/bridges/java.js:8)
    at <eval> (C:UsersgabonDownloadshacker.js:22)

No idea why. From looking in the web it supposed to work.

The frida generally works okay since I can trace function with frida-trace and so on.
Moreover, I checked the value of Java.available and it returns true.

Firestore transaction is taking 2 minutes consistently.

So my 1 cloud function is taking several minutes to execute. I just changed it all without transactions, and it is executed within seconds.

I am handling promises by reading first and then write correctly. But it seems like the issue is that Firestore only allows running transaction from the root and RTDB transaction starting from close to root is causing this even though I don’t have many users. I feel pretty confident that this is Firebase’s bug. In the mean time the only solution seems to be not to use transactions when you are doing a lot of things. I am running just some data manipulations like moving them around and rejigging them. I am using second generation of cloud functions.

What I am doing is creating a new chat room after a user adds a new member. I tried to use Transaction, but if I do that the function takes several minutes, so I had no choice but to not use Transaction.

Firestore codes:

    await admin.firestore().runTransaction(async (t) => {
                const document = await t.get(truthRef);
                if (document.data() !== undefined) {
const firestorePromises: any = []
// change data of this first room to contain more data blah blah blah
firestorePromises.push(admin.firestore().collection("a").doc(b).set(c).then( () => {
                        const firestoreInnerPromises = [];
                        firestoreInnerPromises.push(admin.firestore().collection("a").doc(b).update({
                             messages: allMessagesHistory
                         }))
                       firestoreInnerPromises.push(oldTruthHistoryRef.delete());
                       return Promise.all(firestoreInnerPromises)
                    }));
return Promise.all(firestorePromises); // also tried to do await here same results

                 }

              });