Category: javascript

Trying to create end to end nodejs solution I want to use deltashare, I need to install the delta share package but it’s failing, trying to install danfojs which the delta share package depends on I get back the same error, its the same command in npm and in the GitHub repo, the command is:

npm install danfojs-node  

I get back this issue:

npm WARN cleanup Failed to remove some directories [
npm WARN cleanup   [
npm WARN cleanup     'C:\myPc\e2eTests\node_modules\danfojs-node\node_modules',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:myPce2eTestsnode_modulesdanfojs-nodenode_modules@tensorflowtfjs-backend-webgldist'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\myPc\e2eTests\node_modules\danfojs-node\node_modules\@tensorflow\tfjs-backend-webgl\dist'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\myPc\e2eTests\node_modules\danfojs-node',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:myPce2eTestsnode_modulesdanfojs-nodenode_modules@tensorflowtfjs-converter'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\myPc\e2eTests\node_modules\danfojs-node\node_modules\@tensorflow\tfjs-converter'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\myPc\e2eTests\node_modules\danfojs-node\node_modules\@tensorflow\tfjs-node',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:myPce2eTestsnode_modulesdanfojs-nodenode_modules@tensorflowtfjs-nodedepsincludetensorflow'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\myPc\e2eTests\node_modules\danfojs-node\node_modules\@tensorflow\tfjs-node\deps\include\tensorflow'
npm WARN cleanup     }
npm WARN cleanup   ],
npm WARN cleanup   [
npm WARN cleanup     'C:\myPc\e2eTests\node_modules\danfojs-node',
npm WARN cleanup     [Error: EPERM: operation not permitted, rmdir 'C:myPce2eTestsnode_modulesdanfojs-nodenode_modules@tensorflowtfjs-nodedepsincludetensorflow'] {
npm WARN cleanup       errno: -4048,
npm WARN cleanup       code: 'EPERM',
npm WARN cleanup       syscall: 'rmdir',
npm WARN cleanup       path: 'C:\myPc\e2eTests\node_modules\danfojs-node\node_modules\@tensorflow\tfjs-node\deps\include\tensorflow'
npm WARN cleanup     }
npm WARN cleanup   ]
npm WARN cleanup ]
npm ERR! code 1
npm ERR! path C:myPce2eTestsnode_modulesdanfojs-nodenode_modules@tensorflowtfjs-node
npm ERR! command failed
npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c node scripts/install.js
npm ERR! CPU-windows-3.21.1.zip
npm ERR! https://storage.googleapis.com/tensorflow/libtensorflow/libtensorflow-cpu-windows-x86_64-2.9.1.zip
npm ERR! * Downloading libtensorflow
npm ERR!
npm ERR! * Building TensorFlow Node.js bindings
npm ERR! symlink ./lib/napi-v9 failed:  Error: Command failed: node scripts/deps-stage.js symlink ./lib/napi-v9
npm ERR!   * Symlink of libnapi-v9tensorflow.dll failed, creating a copy on disk.
npm ERR! node:internal/process/promises:289
npm ERR!             triggerUncaughtException(err, true /* fromPromise */);
npm ERR!             ^
npm ERR!
npm ERR! [Error: ENOENT: no such file or directory, copyfile 'C:myPce2eTestsnode_modulesdanfojs-nodenode_modules@tensorflowtfjs-nodedepslibtensorflow.dll' -> 'C:myPce2eTestsnode_modulesdanfojs-nodenode_modules@tensorflowtfjs-nodelibnapi-v9tensorflow.dll'] {
npm ERR!   errno: -4058,
npm ERR!   code: 'ENOENT',
npm ERR!   syscall: 'copyfile',
npm ERR!   path: 'C:\myPc\e2eTests\node_modules\danfojs-node\node_modules\@tensorflow\tfjs-node\deps\lib\tensorflow.dll',
npm ERR!   dest: 'C:\myPc\e2eTests\node_modules\danfojs-node\node_modules\@tensorflow\tfjs-node\lib\napi-v9\tensorflow.dll'
npm ERR! }
npm ERR!
npm ERR! Node.js v21.6.2
npm ERR!
npm ERR!     at genericNodeError (node:internal/errors:984:15)
npm ERR!     at wrappedFn (node:internal/errors:538:14)
npm ERR!     at ChildProcess.exithandler (node:child_process:422:12)
npm ERR!     at ChildProcess.emit (node:events:519:28)
npm ERR!     at maybeClose (node:internal/child_process:1105:16)
npm ERR!     at ChildProcess._handle.onexit (node:internal/child_process:305:5) {
npm ERR!   code: 1,
npm ERR!   killed: false,
npm ERR!   signal: null,
npm ERR!   cmd: 'node scripts/deps-stage.js symlink ./lib/napi-v9'
npm ERR! }

It looks like it’s missing in the installation Tensorflow but doesn’t packages install other packages they depends on first? is the issue I’m working with a windows machine?

I have just started using GSAP ScrollTrigger to add some animations to my websites, but I’ve come across something I’m trying to do which I can’t seem to find an answer for.

I have a <section class="overflow_panels_block"> which is 100vh height and when the viewport gets to this, I’d like the website to stop scrolling and allow the <div class="panel_wrapper"> inside it to scroll down until it gets to the bottom of it’s own scroll to then continue scrolling as normal.

I have included a screenshot below. The <section class="overflow_panels_block"> is the entire light background area which I’d like to prevent from scrolling when it’s reached. The <div class="panel_wrapper"> Is the right side with its own scroll bar.

My HTML as follows:

<section class="overflow_panels_block">
    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6">
                <p class="subheading">project delivery</p>
                <h2 class="mt-0 large"><span class="green">delivering substantial</span> residential &amp; commercial <span>schemes.</span></h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed lectus efficitur, condimentum neque id, blandit lacus. Donec vehicula sem at dolor laoreet, finibus pretium.</p>
                <a href="#" class="box_button arrow green me-4" target="_self">scroll to see recent projects</a>
            </div>
            <div class="col-12 col-lg-5 offset-lg-1">
                <div class="panel_wrapper">
                    <div class="panel">
                        <div class="image_wrapper">
                            <div class="bg_image first_image" style="background-image: url(/assets/2024/03/Home-Interior.webp);">
                                <div class="bg_image second_image" style="background-image: url(/assets/2024/03/Vincent-Place.jpg);"></div>
                            </div>
                        </div>
                        <h3 class="arrow_right outfit">Charles Court</h3>
                        <p>Demolition of former pub to create 3 townhouses, 35 apartments for private and social housing and commercial premises.</p>
                        <p>Demolition of former pub to create 3 townhouses, 35 apartments for private and social housing and commercial premises.</p>
                        <p>Demolition of former pub to create 3 townhouses, 35 apartments for private and social housing and commercial premises.</p>
                        <p>Demolition of former pub to create 3 townhouses, 35 apartments for private and social housing and commercial premises.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

The GSAP ScrollTrigger is all installed correctly etc. I just need some help/guidance on how to configure the settings to suit my needs and therefore help me in the future.

Thanks!

I have three GA4 projects setup for three separate websites. They all have been working for a few months, connecting the preset events. Earlier this week I added a custom event for thumbs up/down feedback. I copied and pasted the code for all three apps so I know it’s the same. However, I’m only actually able to see the event properties in one of my apps (also happens to be the first one I tried sending events to). Is there any reason this could occur? I’m totally stumped at the moment.

Here is my code to send events:

window.gtag("event", `${feedbackEnv}_${feedback}`, {});

I left the properties section blank because I only care about the default properties they include (page_location). However when I click on the button which sends one of these events, I see the event popup in my realtime dashboard, but there are zero properties when I click on it.

Module not found: Error: Package path ./lib/react-markdown is not exported from package E:studynotion6studynotion6node_modulesreact-markdown (see exports field in E:studynotion6studynotion6node_modulesreact-markdownpackage.json)

Getting this error how to solve?

Tried to install react-markdown.

So I have the url to an SVG that I get from an API generating QR codes and the SVG is the image for the QR code. I cannot seem to figure out the best way to rotate this SVG 45 degrees, I have tried getting the svg url making an axios call to get the text data then trying to rotate from there should i convert it to a PNG or so it appears SVGToImg is not a function I thought it was but the library I guess does not have such. Here is what I have tried just now but have not been successful. My libraries are at the top of the code

code:

 const { createCanvas } = require("canvas");
    const svg2img = require("svg2img");
    const svgToImg = require("svg-to-img");

const qrCodeSvgUrl = qrCodeData.data.qr_code;
// Fetch SVG content
const svgResponse = await axios.get(qrCodeSvgUrl, { responseType: "text" });
console.log("svg response = ", svgResponse.data);
const qrCodeSvg = svgResponse.data;

// Convert SVG to PNG
const pngBuffer = await svgToImg(qrCodeSvg, { format: "png" });

// Create a canvas and load PNG buffer
const canvas = createCanvas(200, 200); // Adjust size as needed
const ctx = canvas.getContext("2d");
const img = new canvas.Image();
img.src = pngBuffer;
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

// Rotate the canvas by 45 degrees
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate((45 * Math.PI) / 180);
ctx.drawImage(img, -canvas.width / 2, -canvas.height / 2);

// Convert canvas back to PNG
const rotatedPngBuffer = canvas.toBuffer();
console.log("rotated svg url to visit = ", rotatedPngBuffer);
qrCodeData.data.qr_code = rotatedPngBuffer;

export interface TransformingOptions<T, R> {
    data: T
    // function call with implementation of function parameters
    mapToBoolean?:(data: T[], args:R)=> boolean
    maskBooleanToYesNo<T, argsT>(data: T,args:R)=> string
}

Here is the interface that I have, here are the transformer params

export interface TransformerParamaters {
    key: string
    value?: string | number | boolean
    args?: string | number[]

}

Here is

export const MaskingFunctions = {
    maskBooleanToYesNo<T, argsT>(data: T, args: argsT ) {
        const extractedValue = get(data, args.key)
        return extractedValue === true ? 'Yes' : extractedValue === false ? 'No' : null
    }
}

When i iterate through interfaces, in one of the properties i have a field that contains the name of these functions.

I want to run this dynamically

return TransformFunctions[mappingInterface.func]<Record<string,any>, TransformerParamaters>(data,...mappingInterface.args})

export const MaskingFunctions = {
    maskBooleanToYesNo<T, argsT>(data: T, args: argsT ) {
        const extractedValue = get(data, args.key)
        return extractedValue === true ? 'Yes' : extractedValue === false ? 'No' : null
    }
}

Property ‘key’ does not exist on type ‘argsT’.

This can be compiled:

return TransformFunctions[mappingInterface.func]<Record<string,any>, TransformerParamaters>(data,...mappingInterface.args})

But i need to set the stuff before so it can run

I want to create a browser extension to make scientific papers easier and faster to read: It should parse the text, looking for references of the form “(person 1, person 2, et. al)”, and replace them all with clickable links that open a new tab, which searches for the paper and opens it on arxiv.

To do this, I need to be able to activate the extension and run javascript on a currently open PDF file in the browser. It needs to be able to read the file, and allow me to replace text blocks in it with links that will do something when the user clicks on them.

I am stuck on what should be the simplest part of the task: When the extension runs on a opened PDF file in the browser, how do I read and modify that PDF? All libraries I have found so far can only generate new PDFs or open external files. How do I just modify the currently open one?

Is there any javascript library that will let me do this?

If it is not possible to modify the PDF, is it at least possible to read it? In that case I could just create an HTML overlay over the PDF that contains the links.

I’m new in React.
I was experimenting Fetch API in my Full-Stack project, right below i put my fetch code

const bearerToken = "Bearer " + token

const fetchDataGet = async () => {
        const response = await fetch("http://localhost:8080/api/corso/getcorsi-da?id_ca=1", {
            headers: {
                "method": "GET",
                "Authorization": bearerToken,
                "redirect": "follow"
            }
        })
        return response.json()
    }

I don’t see where is the problem in the Authorization. if I use this type of assignment it returns 401

i managed to reduce the problem using Postman, triyng to put the same url but there i get what I expect, so I tried to fix the header, what I found is that if I use a string with the bearer token (just copy and paste the generated string) it returns 200, but, if I use the assignment above what I get is 401 (Unauthorized)

I’m running an Express JS server on render.com that is responsible for firing SMTP call to an email service. The email service is hosted on one.com (with a custom domain).

I’m using nodemailer to handle my SMTP call, which looks like this:

app.post("/send-mail", validate(schema), (req, res) => {
  console.log("sending email...");
  let transporter = nodemailer.createTransport({
    host: process.env.REACT_APP_HOST,
    port: process.env.PORT,
    auth: {
      user: process.env.REACT_APP_EMAIL_LOGIN,
      pass: process.env.REACT_APP_EMAIL_PASS,
    },
  });

This works just fine when running the Express JS server locally – I am successfully receiving the test email. But once I do the same from Render.com I get a timeout error:

Error: Connection timeout
    at SMTPConnection._formatError (/opt/render/project/src/node_modules/nodemailer/lib/smtp-connection/index.js:790:19)
    at SMTPConnection._onError (/opt/render/project/src/node_modules/nodemailer/lib/smtp-connection/index.js:776:20)
    at Timeout.<anonymous> (/opt/render/project/src/node_modules/nodemailer/lib/smtp-connection/index.js:235:22)
    at listOnTimeout (node:internal/timers:573:17)
    at process.processTimers (node:internal/timers:514:7) {
  code: 'ETIMEDOUT',
  command: 'CONN'
}

Not sure what’s the problem. Should try to transfer the domain to another domain provider or is the problem with Render.com?

I tried running the Express JS server on Render.com and expected that the SMTP call would be successful just as it is when firing from localhost. The settings are exactly the same but I get two different results.

the recursive function calls cx.restore() at the end of the code.
Why does the function return to cx.rotate(2*angle) after cx.restore?

<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

  <style>
    .nummer2{

      top: 500px;
      left: 500px;
    }

    
  </style>



        
</svg>


<canvas width="600" height="600" ></canvas>
<canvas id="nummer2"></canvas>

<script>

let cx2 = document.getElementById("nummer2").getContext("2d");
let cx = document.querySelector("canvas").getContext("2d");
  
function branch(length, angle, scale) {
  debugger;
    cx.fillRect(0, 0, 1, length);
    if (length < 8) return;
    cx.save();
    cx.translate(0, length);
    cx.rotate(-angle);
    branch(length * scale, angle, scale);
    cx.rotate(2 * angle);
    branch(length * scale, angle, scale);
    cx.restore();
  }
  cx.translate(300, 0);
  branch(60, 0.5, 0.8);

</script>

</body>
</html>

I used the debugger to understand the individual steps while executing the code.
According to my current understanding, a function stops after the last line.

Why does the recursive function continue to be executed after cx.restore()?

Thanks for your help!!

I’ve been using google maps via JavaScript for quite a while. I want to include the solar images (similar to Google Project Sunroof) on my existing map. I am able to pull the data back from solar.googleapis.com/v1/dataLayers:get successfully, but have not figured out how to add it to my map.

I tried adding it like this “map.data.addGeoJson(sunroofGeoJson);” and “map.data.addGeoJson(JsObject.jsify(sunroofGeoJson));”, but I keep getting a blank map and this error “Uncaught SyntaxError: Invalid or unexpected token”.

I’ve been searching the web for 4 hours for an example, but I cannot find anything that ties the response back to the map.

var sunroofGeoJson = null;
sunroofGeoJson = await JSON.parse('<%=GetSunroofGeoJson() %>');
map.data.addGeoJson(JsObject.jsify(sunroofGeoJson));

so I have next.js project and there I got stuck, so I will explain my situation with code:

I have layout.tsx in app directory

    export default async function RootLayout({
      children,
    }: Readonly<{
      children: React.ReactNode;
    }>) {
      const { user } = await getServerSession();
    
      return (
        <body className="h-full w-full bg-[#171717] text-white flex items-start justify-center">
          <DashboardDisplay userId={user.id}>{children}</DashboardDisplay>
        </body>
      );
    }

there is DashboardDisplay:

    const DashboardDisplay = ({ children, userId }: any) => {
      const { status, toggle, toggleBySize } = useToggle();
    
      const toggleNavigation = status ? "md:!w-[260px]" : "!w-0";
    
      useEffect(() => {
        window.addEventListener("resize", (x) => toggleBySize(window.innerWidth));
    
        return () =>
          window.removeEventListener("resize", () =>
            toggleBySize(window.innerWidth)
          );
      }, []);
    
      return (
        <>
          <header
            className={`${toggleNavigation} w-full max-w-lg md:max-w-sm h-full overflow-auto z-50 left-0 absolute md:relative`}
          >
            <Navigation onBurger={toggle} />
          </header>
          <main className="flex-1 h-full box-border relative">
            <MobileNavigation className="absolute top-0" />
            <ToggleButton
              onClick={toggle}
              status={status}
              className="absolute left-0 top-[45%] hidden md:block z-40"
            />
    
            <ChatDisplay userId={userId}>{children}</ChatDisplay>
          </main>
        </>
      );
    };

so chatDisplay is a layout of "/dashboard" and "/chat/:chatId" pages:

    const ChatDisplay = ({ messagesData, userId, children }: any) => {
      const [messages, setMessages] = useState(messagesData);
    
      const router = useParams();
    
      return (
        <div className="w-full h-full relative flex flex-col">
          <main className="w-full overflow-auto">
            <MobileNavigation className="sticky top-0 z-40" />
          </main>
          <div className="flex-1">{children}</div>
          <footer className="text-base w-full py-3 px-4 md:px-0 flex flex-col gap-2 bg-[#171717] max-w-3xl m-auto">
            <ChatFooter
              chatId={router.chatId as string}
              userId={userId}
              setAiMessage={setMessages}
              warningInfo="ChatGPT can make mistakes. Consider checking important information."
            />
          </footer>
        </div>
      );
    };

so from ChatFooter component, I get the value that is typed by the user

and finally, the question is how I can pass message value to "/chat/:userId" page:

    export default function Chat({ messages }: any) {
      console.log(messages);
    
      return <h3>here messages</h3>;
    }

consider that, chat page and dashboard page is a child of this layout, so when I try to use cloneElement(children, {messages: "hello world"}) I can’t see these props, I don’t know why…

After some time trying to debug why app is lagging, I found out that lag appears after firebase deploy. I tracked issue down to these 5 scripts that are most likely to blame as there is nothing else different on localhost hosted app but these scripts injected while deploying app on firebase. They are not there before that. They cause JS heap size to keep rising and lag increasingly gets worse. window.ff_trigger_firebase_core for each server I use. All services work perfectly fine without them on localhost. So I don’t know why are they added or what they do. But they cause problems. Any way to prevent them to be injected? injected scripts by firebase

I tried to run on local server and deployed, reduce app to minimum.

UPDATE 5mins later, figured out i just forgot to import updateDoc from firebase/firestore. just figuring out how to make it add a key value pair into the comments array now instead of replacing the value for the comments key

My firestore database looks like:

collection of logs -> individual entries -> fields within those entries

one of those fields include a “comments” field that accepts an array of strings.

i’m trying to make my comments persist into my database but can not get it to work. thought i’d ask after some time troubleshooting

i’m using react.js. here’s what i have so far

        if (newComment.trim() !== '') {
            
            const commentObj = {
                id: Date.now(),
                text: newComment,
            };

            // update comments state with the new comment
            setComments((prevComments) => [...prevComments, commentObj]);

            try {

                const logRef = doc(db, 'logs', logData.id);
                await updateDoc(logRef, {
                    comments: (commentObj.text),
                });
                console.log('Comment successfully added to Firestore!');
            } catch (error) {
                console.error('Error adding comment to Firestore: ', error);
            }

            // clear input field
            setNewComment('');
        }
    };

and here’s what my comments field look like:
comments field within document within collection
i just added an initial 1 manually from firebase to see that it actually posts in my frontend

I am integrating AWS Connect Chat with my app and I get this error:

No JWT detected

I have searched for this error everywhere but I have not come across it, does anyone know how I can go about it? Here’s the code that introduces the error:

amazon_connect('authenticate', function(callback) {
      window.fetch('/support/token').then(res => {
       callback(res?.data);
      });
  });

For the token, I am using JWT.encode to get the token then I Base64.urlsafe_encode64 the token. When it it’s my route, I Base64.urlsafe_decode64 the token first. Anyone see what I’m doing wrong? Any suggestions will be appreciated! Thanks.