How to write a JSON file with a list of discord.js statuses and import it into the main JavaScript file


const statuses = [
 { name: "ABC", type: ActivityType.Streaming },
 { name: "DEF", type: ActivityType.Watching },
 { name: "GHI", type: ActivityType.Listening },
 { name: "JKL", type: ActivityType.Playing },
];
client.on('ready', (c) => {
  console.log(`✅ ${c.user.tag} is online!`);
  setInterval(() => {
    var newStatus = statuses[Math.floor(Math.random() * statuses.length)];
    client.user.setActivity(newStatus);
  }, 10000);
});

statuses.json

(nothing, so far)

I tried adding a JSON file (a random example shown below):

[
  "Playing Minecraft",
  "Listening to Spotify",
  "Watching YouTube",
  "Studying JavaScript",
  "Exploring Discord.js"
]

But yet, I am still not sure how to call this into my main index.js file.

nextjs application error when I use tag button with generateMetaData

generateMetaData causes problem when I use tag button

Hello i have a problem and i need your help to resolve my issue.

I’m using nextjs and I can’t seem to use the tag.

when i use generateMetaData provided by nextjs i am facing the error “Application error: a client-side exception has occurred (see the browser console for more information).

My code to generateMetaData :

const getArticle = cache((id) => {
  const articleService = new ArticleService();
  return articleService.getOne(id).then((res) => {
    return res.resultFinal;
  });
});

export async function generateMetadata({ params }) {
  const id = params.id;
  const articleService = new ArticleService();

  const article = await articleService.getOne(id).then((res) => {
    return res.resultFinal;
  });

  if (!article) {
    return {
      title: "Article not found",
      description: "Article not found",
      openGraph: {
        title: "Article not found",
        description: "Article not found",
      },
    };
  }

  return {
    title: article.title,
    description: article.description,
    openGraph: {
      title: article.title,
      description: article.description,
      images: [process.env.NEXT_PUBLIC_IMAGE_BASE_URL + "/" + article.medias[0].url],
    },
  };
}

My component :

export default async function Page({ params, searchParams }) {
  const article = await getArticle(params.id);

  const sharedFacebook = async () => {
    alert("clicked");
  };

   return (
      <>
      <button onClick={sharedFacebook}></button>
      </>
    )
}

When I add “use client” in the sharedFacebook function it works but when I click on the button I end up with the message “Application error…” :

same when i add “use client” in top to my component

apply hover class to a button with tailwind and vue 3 computed function

hi guys i am trying to apply a hover class to a button as follows :

<div class="tw-m-3">
    <button
        class="tw-bg-white tw-text-gray-800 tw-text-sm  tw-font-semibold tw-rounded tw- 
                border-b-2  hover:tw-text-white tw-shadow-md tw-py-2 tw-px-3 tw-inline-flex 
                 tw-items-center tw-group btn"
        :class="[ 'hover:' + FnColor]">
        <i class="fa-thin fa-envelopes-bulk group-hover-[.btn]:tw-text-white fa-lg tw-py-2"> 
         </i>
        <span class="tw-ml-2 group-hover-[.btn]:tw-text-white">{{ FnColor }}</span>
    </button>
</div>

but it doesn’t apply when hovering the FnColor variable is a computed that depends on a props that is passed to the component.

const {btnText,btnColor} = defineProps({
        btnText: {
           type: String,
           default: ''
        },
        btnColor: {
           type: String,
           default: 'info',
           required: true,
         }
})

const FnColor = computed(() => {
    switch (btnColor) {
        case 'primary':
          return 'tw-bg-[#2A91FF]';
        case 'secondary':
          return 'tw-bg-[#2AB1FF]';
    }
 });

if you can help me I would appreciate it very much

Generate random colours that contrast nicely with white text

I have a random colour generator that works as expected, however I am wanting to use white text on top of whatever colour I generate and of course, this is no good when the colour generated is light as the contrast makes the text unreadable.

const generateColour = () => '#' + Math.random().toString(16).slice(-6);

enter image description here

I’m wondering if there is any way in which my current code can be altered to mean that I only receive colours dark enough to be of a accessible contrast ratio?

TypeError [ERR_INVALID_ARG_TYPE]: “to” argument must be of type string in Next.js project

I’m developing a Next.js application and encountered a TypeError related to the “to” argument being undefined. This error occurs when I run my development server with npm run dev. I’ve checked my environment setup and the related project dependencies but haven’t been able to pinpoint the cause of this error.

Error Message:
TypeError [ERR_INVALID_ARG_TYPE]: The “to” argument must be of type string. Received undefined
at validateString (node:internal/validators:162:11)
at Object.relative (node:path:1195:5)
at Watchpack. (/Users/gracemitchell/com.primebid.estimate/node_modules/next/dist/server/lib/router-utils/setup-dev-bundler.js:1420:55)

Environment:

  • Node.js version: (specify your version, e.g., 20.11.0)
  • Next.js version: 14.1.0
  • Operating System: (e.g., macOS, specify if relevant)

I’ve attempted the following troubleshooting steps without success:

  1. Checked .env.local and other environment configuration files for any obvious issues.
  2. Ensured all dependencies are up to date with npm update.
  3. Searched for similar issues in the Next.js GitHub issues and Stack Overflow.

Questions:

  1. What could be causing this TypeError related to the “to” argument being undefined?
  2. Are there specific configurations or dependencies in Next.js that I should check?
  3. Has anyone experienced a similar issue and found a workaround or solution?

Any insights or suggestions would be greatly appreciated. Thank you!

  1. What could be causing this TypeError related to the “to” argument being undefined?
  2. Are there specific configurations or dependencies in Next.js that I should check?
  3. Has anyone experienced a similar issue and found a workaround or solution?

Any insights or suggestions would be greatly appreciated. Thank you!

How to Make Axios AbortController Wait for Server Response?

I’m using axios for my http requests, and AbortController to abort them.

And I figured that running conroller.abort() will throw an error immediatly and doesn’t wait for the server response, and the server sometime will keep processing until it hits the request cancelled at last, i.e. after running the process completely.

So I want to wait for the server after the abort is called, if the server returned my custom status code 499 then it’s canceled safely, otherwise, run the normal process for success or error codes.

Does cancelToken.source() work in this case, and is it recommended?

Fixing ‘reducer’ Required Argument Error in Redux Saga

I am trying to learn redux saga by following the below tutorial.
but when I include the below line I am getting an error.

Error in /turbo_modules/@reduxjs/[email protected]/dist/redux-toolkit.cjs.development.js (525:15)
“reducer” is a required argument, and must be a function or an object of functions that can be passed to combineReducers

can you let me know how to fix it
providing my code below
I installed all the packages and tried to debug but still no luck.
I have created actions and reducers too

https://stackblitz.com/edit/react-9czykt?file=index.tsx,pages%2FHome.tsx,pages%2FAbout.tsx,App.tsx,reducers%2Freducers.js,actions%2Factions.js,API.tsx

https://ibjects.medium.com/getting-started-with-redux-saga-tutorial-740954fc9e49

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import Demo from './Demo';
import Home from './pages/Home';
import About from './pages/About';
import Products from './pages/Products';
import Error from './pages/Error';
import SharedLayout from './pages/SharedLayout';
import SingleProduct from './pages/SingleProduct';
import Dashboard from './pages/Dashboard';
import Login from './pages/Login';
import { Provider } from 'react-redux';
import { configureStore } from '@reduxjs/toolkit';
//import { myReducer } from '../reducers';
import createSagaMiddleware from '@redux-saga/core';
import { myReducer } from './reducers/reducers';

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { useState } from 'react';

import { createRoot } from 'react-dom/client';
const sagaMiddleware = createSagaMiddleware();
//const store = configureStore({ reducer: myReducer });

// const store = configureStore({
//   reducer: myReducer,
//   middleware: [sagaMiddleware],
// });

const App = () => {
  const [user, setUser] = useState(null);

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<SharedLayout />}>
          <Route index element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="products" element={<Products />} />
          <Route path="products/:productId" element={<SingleProduct />} />
          <Route path="login" element={<Login setUser={setUser} />} />
          <Route path="login" element={<Login setUser={setUser} />} />

          <Route path="*" element={<Error />} />
        </Route>
      </Routes>
      <StyledEngineProvider injectFirst>
        <Demo />
      </StyledEngineProvider>
    </BrowserRouter>
  );
};

createRoot(document.querySelector('#root')!).render(
  <React.StrictMode>
    {/* <Provider store={store}> */}
    <App />
    {/* </Provider> */}
  </React.StrictMode>
);

Add persistent global function across pages via window, or localstorage, etc

I am trying to hide an icon on a page I can’t edit directly. I need to add a function that has in it document.getElementById('icon').style.display = 'none';. I don’t need help with the function.

So more in-depth: there is a page, let’s call it unEditPage, that I cannot edit directly. It doesn’t share any resources like our other pages on the website do – aka no global js files or css.

unEditPage and all other pages that I have access to are all on the same domain.

I’ve tried attaching an event listen to the window and fire on url contains, but that listener is destroyed on page navigation.

Solution would be something I can inject in another page that carries over to the unEditable page. Something maybe using unload, localstorage, cookies, or global something.

Slow Web Scrapping

i have this code to scrap a website, but in my computer it runs really slow, can someone with some more experiencia can tell me what am i doing wrong? I´m using puppeteer in js, this is a page of real state in mexico, so probably you’ll need to understand a little bit of spanish, I tried to use the network in the inspector but i don´t find any call to an api that is usefull for the info i need

const mysql = require('mysql2');
const puppeteer = require('puppeteer-extra');
const StealthPlugin = require('puppeteer-extra-plugin-stealth');

puppeteer.use(StealthPlugin());

function delay(time) {
    return new Promise(function(resolve) { 
        setTimeout(resolve, time)
    });
}

async function createInmueble(page, info){

    return await page.evaluate((info) => {
        let inmueble = {};

        inmueble.titulo = info.title;
        inmueble.precios = info?.priceOperationTypes?.[0]?.prices?.[0]?.amount.toString() || document.querySelector(".price-items").firstElementChild.textContent.trim().split(" ")[1];
        inmueble.moneda = info?.priceOperationTypes?.[0]?.prices?.[0]?.isoCode || document.querySelector(".price-items").firstElementChild.textContent.trim().split(" ")[0];
        inmueble.inmobiliaria = info?.publisher?.name || null;
        inmueble.tipo = info?.realEstateType?.name || null;
        inmueble.estado = info?.postingLocation?.location?.parent?.parent?.name || null;
        inmueble.municipio = info?.postingLocation?.location?.parent?.name || null;
        inmueble.zona = info?.postingLocation?.location?.name || null;
        inmueble.latitud = info?.postingLocation?.postingGeolocation?.geolocation?.latitude.toString() || null
        inmueble.longitud = info?.postingLocation?.postingGeolocation?.geolocation?.longitude.toString() || null
        inmueble.imagenes = info?.pictures?.map(picture => picture.url1200x1200) || null;
        inmueble.metros_totales = info?.mainFeatures?.CFT100?.value || "0";
        inmueble.metros_construidos = info?.mainFeatures?.CFT101?.value || "0";
        inmueble.banios = info?.mainFeatures?.CFT3?.value || "0";
        inmueble.estacionamientos = info?.mainFeatures?.CFT7?.value || "0";
        inmueble.recamaras = info?.mainFeatures?.CFT2?.value || "0";
        inmueble.antiguedad = info?.mainFeatures?.CFT5?.value || "0";
        inmueble.medio_banio = info?.mainFeatures?.CFT4?.value || "0";
        inmueble.direcciones = info?.postingLocation?.address?.name || null;
        inmueble.new_latitud = inmueble?.latitud || null;
        inmueble.new_longitud = inmueble?.longitud || null;
        inmueble.url = info?.seoAttributes?.canonical || null;
        inmueble.telefono = info?.whatsApp;
        inmueble.nombre_asesor = null;
        inmueble.email = null;

        return inmueble;
    }, info);
}

async function getInfoInmueble(page){
    console.log(page.url());

    const info = await page.evaluate(() => {

        return POSTING;
    });

    return info;
}

async function scopeEnlaces(page, enlaces){
    let info;
    let inmuebles = [];
    for(const enlace of enlaces){
        try{
            await page.goto(enlace);
            info = await getInfoInmueble(page);
            const inmueble = await createInmueble(page, info);
            inmuebles.push(inmueble);
        }
        catch(err){
            console.error("error", enlace);
        }
    }

    return inmuebles;
}

async function getEnlaces(page){
    const enlaces = await page.evaluate(() => {

        try{
            let div_padre = document.querySelector(".postings-container");

            const div_hijo = Array.from(div_padre.children);

            const enlaces = div_hijo.map(div => {
                const link_base = "https://www.vivanuncios.com.mx";
                const div_enlace = div.firstElementChild;
                const enlace = div_enlace.getAttribute("data-to-posting");

                return link_base+enlace;
            }).filter(enlace => enlace !== null);

            return enlaces;
        }
        catch(err){
            console.log("Error en page:", err);
            return [];
        }
    });

    return enlaces;
}

async function getInmuebles(page, url) {
    await page.goto(url);
    const enlaces = await getEnlaces(page);
    return await scopeEnlaces(page, enlaces);
}

async function postInmueble(inmueble){
    let query = `INSERT INTO inmueblesvivanuncio (titulo, precios, moneda, inmobiliaria, tipo, estado, municipio, zona, latitud, longitud, imagenes, metros_totales, metros_construidos, banios, estacionamientos, recamaras, antiguedad, medio_banio, direcciones, new_latitud, new_longitud, url, telefono, nombre_asesor, email) VALUES ('${inmueble.titulo}', '${inmueble.precios}', '${inmueble.moneda}', '${inmueble.inmobiliaria}', '${inmueble.tipo}', '${inmueble.estado}', '${inmueble.municipio}', '${inmueble.zona}', '${inmueble.latitud}', '${inmueble.longitud}', '${JSON.stringify(inmueble.imagenes)}', '${inmueble.metros_totales}', '${inmueble.metros_construidos}', '${inmueble.banios}', '${inmueble.estacionamientos}', '${inmueble.recamaras}', '${inmueble.antiguedad}', '${inmueble.medio_banio}', '${inmueble.direcciones}', '${inmueble.new_latitud}', '${inmueble.new_longitud}', '${inmueble.url}', '${inmueble.telefono}', '${inmueble.nombre_asesor}', '${inmueble.email}')`;
    
    connection.query(query, (error, results, fields) => {
        if (error){
            console.log("error", error);
        }
        else{
            console.log('Fila insertada con éxito');
        }
    });
}

async function scopeInmuebles(all_inmuebles){
    await all_inmuebles.forEach(async inmueble => {
        try{
            await postInmueble(inmueble);
        }
        catch(err){
            console.error("surgio un error");
        }
    });
}

async function getBotonSiguiente(page){
    const boton = await page.evaluate(() => {
        const boton = document.querySelector(".sc-n5babu-2.kNwjYM");

        if(boton){
            return true;
        }

        return false;
    });

    return boton
}

async function scanPage(page){
    const BASE_URL = 'https://www.vivanuncios.com.mx/s-casas-en-venta';
    let estado = "chihuahua";
    let i = 16;
    let all_inmuebles = [];
    let boton;

    do{
        let url = `${BASE_URL}/${estado}/page-${i}`;
        console.log("Pagina nueva: ", url, "n");

        const inmuebles = await getInmuebles(page, url);
        all_inmuebles = all_inmuebles.concat(inmuebles);

        await page.goto(url);
        
        if(i%5 == 0){ 
            await scopeInmuebles(all_inmuebles);
            all_inmuebles = [];
        }

        boton = await getBotonSiguiente(page);
        if (boton) {
            i++;
        } else {
            console.log("No hay boton");
            await scopeInmuebles(all_inmuebles);
        }

    } while(boton && i <= 1000);

    return all_inmuebles;
}

async function scrapeo(){
    const browser = await puppeteer.launch({headless: false, executablePath: "C:/Program Files (x86)/Microsoft/Edge/Application/msedge.exe"});
    const page = await browser.newPage();
    
    const inmuebles = await scanPage(page);

    await browser.close();

    return inmuebles;
}

async function main(){
    const all_inmuebles = await scrapeo();
    connection.end();
}

const connection = mysql.createConnection({
    host: '127.0.0.1',
    user: 'root',
    password: 'CocacolA&_2016',
    database: 'InmobiliariaPrueba'
});

connection.connect();

main();

I have try concurrency but it just makes it slower

Do you know why the error message “TypeError: expressJwt is not a function” is appearing? How can it be fixed?

const expressJwt = require('express-jwt')

function authJwt() {
    const secret = process.env.secret
    return expressJwt({
        secret,
        algorithms: ['HS256']
    })
}

module.exports = authJwt
C:code-wldnfinal-projectwldn-apihelpersjwt.js:5
return expressJwt({
       ^

TypeError: expressJwt is not a function
    at authJwt (C:code-wldnfinal-projectwldn-apihelpersjwt.js:5:12)
    at Object.<anonymous> (C:code-wldnfinal-projectwldn-apiapp.js:18:9)

enter image description here

ASAP… I tried to resolve the error message “TypeError: expressJwt is not a function” by ensuring that express-jwt is properly imported and used as a function in the jwt.js file. I expected the error to be resolved, allowing the application to run without any issues related to expressJwt. However, the error persisted despite my attempts to address it.

delete button y addButton

I built a website where you can save and delete times. At the beginning I can save. But when I delete, I delete all times and can no longer save anything. Also, when I reload the page, what I deleted is back. Can anybody help me with this? Thanks in advance!

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arbeitszeiten App</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            gap: 16px;
            background-color: white;
            font-family: "Roboto";
        }

         #addbutton {
            background-color: rgb(7, 158, 240);
            color: white;
            border: none;
            font-size: 20px;
            padding: 16px;
            cursor: pointer;
        }

        #deletebutton{
            background-color: red;
            color: white;
            border: none;
            font-size: 20px;
            padding: 16px;
            cursor: pointer;
        }


        input {
            border: 1px solid rgba(0, 0, 0, 0.12);
            height: 50px;
            border-radius: 8px;
            width: calc(100% - 16px);
        }

        .list-item {
            background-color: white;
            border: 1px solid rgba(0, 0, 0, 0.12);
            padding: 16px;
            border-radius: 8px;
            font-weight: 60;
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 16px;
        }

        .small-img {
            width: 24px;
            height: 24px;
        }
    </style>
</head>

<body>


    <h1>Arbeitszeiten</h1>
    <input id="myDate" placeholder="Datum einfügen" type="date">
    <input id="myStartTime" placeholder="Startzeit einfügen" type="time">
    <input id="myEndTime" placeholder="Endzeit einfügen" type="time">
    <button id="addbutton" onclick="addWorktime()">Speichern</button>
    <button id="deletebutton" onclick="deleteWorktime()" onclick="sicherheitsabfrage()"> Alle Arbeitszeiten löschen</button>


    <div id="myWorkingHours">

    </div>

    <script src="script.js"></script>

</body>

</html>

and the javascript file:



function deleteWorktime() {
    let myWorkingHours = document.getElementById("myWorkingHours");
    myWorkingHours.parentNode.removeChild(myWorkingHours)
}

function sicherheitsabfrage(){
    confirm(message)
}

myWorkingHours.innerHTML = localStorage.getItem('html');

function addWorktime() {

    let currentDate = myDate.value;
    let startTime = myStartTime.value;
    let endTime = myEndTime.value;

    myWorkingHours.innerHTML +=
        `<div class="list-item">
    <img class="small-img" src="img/Uhr.png">
    ${currentDate} ${startTime} - ${endTime} 
    </div>`;

    localStorage.setItem('html', myWorkingHours.innerHTML);
}

I have search 3 hours, but with not results

How to read data from fetch() getting a ReadableStream? [duplicate]

Using the fetch-function in a NodeJS application, I receive a response-object that contains a ReadableStream.

In my case, I want to catch errors and I try to figure out any response which could be part of the errornous request.

const res = await fetch(url);
if (!res.ok) {
      console.log('Status:', res.status);
      console.log('StatusText:', res.statusText);
      //console.log(res);
      const body = res.body;
      console.log(body);

The console.log on the body gives:

ReadableStream { locked: false, state: 'readable', supportsBYOB: false }

How can I use the ReadableStream to get a real string?

I was reading on Mozilla Database but I don’t understand their corresponding article especially not the example, which looks really weird.

How can I remove last * from each “organisations”: value from the string without using JSON.parse() and remove last , from [] using javascript?

let abc = '[{"userid":"88623619","organisations":"Imperial College London*Imperial College Healthcare NHS Trust*Imperial College Healthcare NHS Trust*Imperial College Healthcare NHS Trust*Milton Keynes Hospital NHS Foundation Trust*","oversightGroupRole":"Chair","oversightGroupMemberName":"Dr Ahmed Ahmed","oversightGroupType":"Steering Committee"},{"userid":"88624025","organisations":"Bangor University*Barnet, Enfield and Haringey Mental Health NHS Trust*Cambridge University Hospitals NHS Foundation Trust*","oversightGroupRole":"Public Member","oversightGroupMemberName":"Professor b b","oversightGroupType":"Advisory Group"},{"userid":"88623985","organisations":"Aberdeen And District Fibromyalgia Support Group*Additive Design Ltd*Altnagelvin Area Hospital*Ataxia UK*Tameside Hospital NHS Foundation Trust*","oversightGroupRole":"Chair","oversightGroupMemberName":"Chief TestTestRr TestTestRr","oversightGroupType":"Data Monitoring Committee"},]';

the Desried Result is

abc = '[{"userid":"88623619","organisations":"Imperial College London*Imperial College Healthcare NHS Trust*Imperial College Healthcare NHS Trust*Imperial College Healthcare NHS Trust*Milton Keynes Hospital NHS Foundation Trust","oversightGroupRole":"Chair","oversightGroupMemberName":"Dr Ahmed Ahmed","oversightGroupType":"Steering Committee"},{"userid":"88624025","organisations":"Bangor University*Barnet, Enfield and Haringey Mental Health NHS Trust*Cambridge University Hospitals NHS Foundation Trust","oversightGroupRole":"Public Member","oversightGroupMemberName":"Professor b b","oversightGroupType":"Advisory Group"},{"userid":"88623985","organisations":"Aberdeen And District Fibromyalgia Support Group*Additive Design Ltd*Altnagelvin Area Hospital*Ataxia UK*Tameside Hospital NHS Foundation Trust","oversightGroupRole":"Chair","oversightGroupMemberName":"Chief TestTestRr TestTestRr","oversightGroupType":"Data Monitoring Committee"},]';

My Code which is not working:

let abc = '[{"userid":"88623619","organisations":"Imperial College London*Imperial College Healthcare NHS Trust*Imperial College Healthcare NHS Trust*Imperial College Healthcare NHS Trust*Milton Keynes Hospital NHS Foundation Trust*","oversightGroupRole":"Chair","oversightGroupMemberName":"Dr Ahmed Ahmed","oversightGroupType":"Steering Committee"},{"userid":"88624025","organisations":"Bangor University*Barnet, Enfield and Haringey Mental Health NHS Trust*Cambridge University Hospitals NHS Foundation Trust*","oversightGroupRole":"Public Member","oversightGroupMemberName":"Professor b b","oversightGroupType":"Advisory Group"},{"userid":"88623985","organisations":"Aberdeen And District Fibromyalgia Support Group*Additive Design Ltd*Altnagelvin Area Hospital*Ataxia UK*Tameside Hospital NHS Foundation Trust*","oversightGroupRole":"Chair","oversightGroupMemberName":"Chief TestTestRr TestTestRr","oversightGroupType":"Data Monitoring Committee"},]';

    abc = abc.replace(/,(?=[^,]*$)/, '');

    let startIndex = 0;
    while ((startIndex = abc.indexOf('"organisations":', startIndex)) !== -1) {    
        let endIndex = abc.indexOf('*', startIndex + '"organisations":'.length);
        if (endIndex !== -1) {       
            abc = abc.slice(0, endIndex) + abc.slice(endIndex + 1);
        }
        startIndex += '"organisations":'.length;
    }

    console.log(abc);

Unable to use Javascript Library in Browser

I want to log all the events from a midi file.
I found a library that should do just that:
text

Problem is I can’t figure out how to use it in a website.
I’ve tried with a CDN from jsdeliver, however I get the error: “loadFile is only supported on Node.js”

I’ve tried with npm and vite build, however I still get the same error. The library uses the following codeCode

This library has 350 stars and seems like it should be of good quality,
If you could help me figure out how to correctly use it in a web project, that would be great. (in the browser)

Right now, I’m using the ES6 import:enter image description here

Not sure how I can use nodejs in the browser, or if there is something I can do to fix this, is this the fault of the library?

I can perfectly fine import local files for Threejs (for example) within the same project. Not sure why this dosen’t work…

Thanks for any help!