Category: javascript

It is working on my screen and some of the testers screen but some of the testers that has smaller screen size it is opening a new link instead of the pop up

HTML:

<a class="popup-video" href="videos/onequote 1.mp4">
  <img src="images/thumb1.png">
</a>

SCRIPT:

$(function() {
                $('.popup-video').magnificPopup({
                    disableOn: 1000,
                    type: 'iframe',
                    mainClass: 'mfp-fade',
                    removalDelay: 160,
                    preloader: false,
                    fixedContentPos: false
                });
            });

I’m making a practice website to after just learning JS and for some reason none of my event listeners are firing. I have tried to figure it out for several days and I’m at the end of my rope. Pls help.
Here’s the code:

const hideButton= document.getElementById('hide');
    const expandButton= document.getElementById('show');
    function expandProject(){
              const iHeight= document.getElementById('internal')
              iHeight.style.height= 'auto';
              expandButton.style.display= 'none';
              hideButton.style.display= 'block';
    }
    function hideProject(){
              const iHeight= document.getElementById('internal')
              iHeight.style.height= '400';
              expandButton.style.display= 'block';
              hideButton.style.display= 'none';
    }
    //expandButton.addEventListener('click', expandProject);
    //hideButton.addEventListener('click', hideProject);
    expandButton.onclick(expandProject);
    hideButton.onclick(hideProject());

It’s supposed to uncap the height of a section that has overflow hidden. The elements with id of ‘hide’ and ‘show’ are buttons, ‘hide’ is display: none; by default. ‘internal’ is the section that should be expanding but isn’t.

I’ve done both addEventListener and onclick, as seen above. I double checked that I have in my html, and it is linked to main.js(my javascript file). I’ve tried making them anonymous functions and using named functions. I’ve tried rewording the request and naming and unnaming variables.
When I inspect in google chrome it just says typeError but nothing I know says this should be an error. Pls help.

npm error code ENOENT
npm error syscall open
npm error path C:UsersACERpackage.json
npm error errno -4058
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open ‘C:UsersACERpackage.json’
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: C:UsersACERAppDataLocalnpm-cache_logs2025-04-28T03_00_44_965Z-debug-0.log
PS C:UsersACERreact>

my react or npm is download but does not start

how to solvethis problem

Don’t ask why, it would take too long to explain. It’s a crazy fever-induced experiment.

I want to point a reference to a property, specifically I want to push that reference to an array, without triggering the getter of the target property.

I don’t think this is possible, because referencing the object’s property at all triggers the getter. However… because I’m only setting a reference and not consuming the value, I’m thinking there might be a way hidden deep in the lore.

Here’s the dumbed-down setup:

const _myobj = {};
const _myarray = [];
Object.defineProperty(_myobj, "foo", {
  enumerable: true,
  configurable: true,
  get: () => {
     delete _myobj[prop];
     _myobj[prop] = someOtherValue;
     return _myobj[prop];
  }
})

_myarray.push(_myobj["foo"]); //<- getter triggered here

Ideally, when I hit _myarray[0], that’s when I would want the getter to be called.

I think it can’t be done in general because it probably needs to look at the value to decide if it’s a primitive, as JS copies primitives.

About the closest I can fathom is getting the getter from the descriptor, but that gives me the actual function, which isn’t exactly what I’m looking for.

_myarray.push(Object.getOwnPropertyDescriptor(_myobj, "foo").get); 

Does JavaScript have a “point, but don’t look” feature? Or can you think of some other voodoo?

This Mousewheel script works but only Forwards. No matter if you scroll up or down. I’m trying to use the mousewheel to cycle through divs forwards AND backwards. Here is what i have so far.

    body {
        background-color: #ffffff;
        overflow: hidden;
    }

    html,
    body {
        height: 100%;
    }

    .box {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .tabcontent {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 180px;
        height: 100px;
    }

    .name {
        position: absolute;
        top: 0;
        left: 0;
        width: 180px;
        height: 100px;
    }

<div class="box">
    <div id="can1" class="tabcontent">
        <div class="name">Bluejay</div>
    </div>
    <div id="can2" class="tabcontent">
        <div class="name">Canada jay</div>
    </div>
    <div id="can3" class="tabcontent">
        <div class="name">Canada goose</div>
    </div>
    <div id="can4" class="tabcontent">
        <div class="name">Common loon</div>
    </div>
    <div id="can5" class="tabcontent">
        <div class="name">American robin</div>
    </div>
    <div id="can6" class="tabcontent">
        <div class="name">Black-capped chickadee</div>
    </div>
</div>

    function openCity(evt, cityName) {
        var i, tabcontent;
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }

    var clicked = 0;
    window.addEventListener('wheel', function (event) {
        if (clicked == 0) {
            openCity(event, 'can1');
            clicked = 1;
        }
        else if (clicked == 1) {
            openCity(event, 'can2');
            clicked = 2;
        }
        else if (clicked == 2) {
            openCity(event, 'can3');
            clicked = 3;
        }
        else if (clicked == 3) {
            openCity(event, 'can4');
            clicked = 4;
        }
        else if (clicked == 4) {
            openCity(event, 'can5');
            clicked = 5;
        }
        else if (clicked == 5) {
            openCity(event, 'can6');
            clicked = 0;
        }
    });

I’ve also tried the DeltaY way, But could not figure it out. So my question is.. how do i use the mousewheel to move forwards and backwards?

I have a button that I need to click to open up file explorer and select a file. The entire page is JavaScript functions and there is no button id or name that comes up in the html

I tried:

myField = driver.FindElement(By.XPath("//input[@name='document.forms[0].file_1.value']")); myField.SendKeys(String.Format("{0}{1}", gPath, "COMPLETEPETITION.pdf"));

I wasn’t really expecting that was going to work. The console screen from chrome driver says element not intractable as to trying to set a javascript value from document.forms[0].file_1.value’]

type herefunction transfer_attach()
{
    var files = "";
    var filename = getfilename();
    var items = document.forms[0].files.length;
    var error = 0;
    if(items == 0)
    {
        if(filename == "")
        {
            alert("You must specify the name of the PDF attachment and add it to the list.");
            return 0;
        }
        else
        {
            error = 1;
        }
    }

    if(!error)
    {
        for (var i = 0; i < items ; i++)
        {
            if(document.forms[0].files.options[i].text != "")
            {
                if(files == "")
                {
                    files = document.forms[0].files.options[i].value;
                }
                else
                {
                    files = files + "," + document.forms[0].files.options[i].value;
                }
            }
        }

        if(i == 0){
            document.forms[0].Action.value = "sendone";
        }else{
            document.forms[0].FileList.value = files;

        }
    }
    if(filename != "" && document.forms[0].Action.value == "sendall")
    {
        error = 1;
    }
    // remind the user to add document to the list
    if(error)
    {
        alert("Please add to the list.");
        return 0;
    }
    return 1;
}

Attached is an image of the page[

I seek to implement the following connection logic:

1. In order to get through their routers/NAT and connect via WebRTC, web browser clients first connect to a server to have holes punched in their firewalls.

2. That server keeps a list of the public IPs and open ports of all connected browsers.

3. Every connected browser can request that list and directly connect to others without the server knowing who connected with whom.

The core part is the requirement that (for the sake of privacy) the server must not be able to determine which pairs of browsers are connected.

Can this be achieved with the JavaScript WebRTC API provided in modern web browsers?

I am certain that this is possible with any client that provides direct access to the UDP protocol, but I assume web browsers won’t allow that, in the same way that they enable HTTP and WebSocket connections but don’t allow forming raw TCP connections.

In case the given logic can indeed be implemented in the browser, a secondary question would be if multiple connections can be handled using the same hole, or if any new browser-browser connection requires a new roundtrip to the server for hole punching.

So I wanted to code an interactive flipbook to show my magazine design, but the flipbook only works when I go in Inspect Element mode, or when I open my website on mobile. I’m a beginner coder and used turn.js to achieve the flipping effect.

Here is my JS code for the webpage

// Load navbar and footer into every page
document.addEventListener("DOMContentLoaded", () => {
    // Load the navbar
    fetch("navbar.html")
        .then((res) => res.text())
        .then((data) => {
            document.getElementById("navbar").innerHTML = data;
        });

    // Load the footer
    fetch("footer.html")
        .then((res) => res.text())
        .then((data) => {
            document.getElementById("footer").innerHTML = data;
        });

    // Wait for the DOM to fully load before initializing Turn.js
    const flipbook = document.querySelector(".flipbook");

    // Ensure the flipbook exists before initializing Turn.js
    if (flipbook) {
        const initializeFlipbook = () => {
            const screenWidth = window.innerWidth;

            // Adjust flipbook size based on screen width
            let flipbookWidth = 800;
            let flipbookHeight = 500; // Default aspect ratio: 16:10

            if (screenWidth <= 768) {
                flipbookWidth = 600;
                flipbookHeight = flipbookWidth * 0.625; // Maintain aspect ratio
            }

            if (screenWidth <= 480) {
                flipbookWidth = 320;
                flipbookHeight = flipbookWidth * 0.625; // Maintain aspect ratio
            }

            // Set the container's dimensions
            const flipbookContainer = document.querySelector(".flipbook-container");
            flipbookContainer.style.width = `${flipbookWidth}px`;
            flipbookContainer.style.height = `${flipbookHeight}px`;

            // Force reflow
            flipbook.offsetHeight;

            // Initialize Turn.js
            $(flipbook).turn({
                width: flipbookWidth,
                height: flipbookHeight,
                autoCenter: true,
                elevation: 50,
                gradients: true,
                when: {
                    turning: function (event, page, view) {
                        console.log("Turning to page:", page);
                    },
                },
            });
        };

        // Initialize the flipbook
        initializeFlipbook();

        // Reinitialize the flipbook on window resize
        window.addEventListener("resize", () => {
            if ($(flipbook).data("turn")) {
                $(flipbook).turn("destroy"); // Destroy the existing flipbook
            }
            initializeFlipbook(); // Reinitialize with new dimensions
        });
    }
    $(flipbook).turn({
        width: flipbookWidth,
        height: flipbookHeight,
        autoCenter: true,
        elevation: 50,
        gradients: true,
        when: {
            turning: function (event, page, view) {
                console.log("Turning to page:", page);
            },
        },
    });
    console.log("Turn.js initialized!");
    
});

Here is my github repository if it helps: https://github.com/iiRosie1/portfolio

And the webpage so you can see how it’s broken right now: https://iirosie1.github.io/portfolio/brandmagazine.html

Any help is appreciated!

I am having a number of localFonts created using next/font/local library. I want to export all these localfont object . So to avoid so many exports I am trying to creat a single javascript object with font name as key and value as localfont object. but it is showing error : “Error: × Font loaders must be called and assigned to a const in the module scope”.
my hsciifonts.js code is:

// hsciifonts.js
import localFont from "next/font/local";
export const allhfonts = {
binarywenglosoftw8asc:localFont({ src: "./fonts/hscii/binarywenglosoftw8asc.woff2", display: "swap", }),
heksenglosoftw8asc:localFont({ src: "./fonts/hscii/heksenglosoftw8asc.woff2", display: "swap", }),
inglishenglosoftw8asc:localFont({ src: "./fonts/hscii/inglishenglosoftw8asc.woff2", display: "swap", }),
koreanenglosoftw8asc:localFont({ src: "./fonts/hscii/koreanenglosoftw8asc.woff2", display: "swap", }),
russianenglosoftw8asc:localFont({ src: "./fonts/hscii/russianenglosoftw8asc.woff2", display: "swap", }),
hindienglosoftw8asc:localFont({ src: "./fonts/hscii/hindienglosoftw8asc.woff2", display: "swap", }),
//// ...... more fonts
}

I’ve developped a small dash app that allows user to plot several charts depending on dropdown inputs.

I first used bootstrap dropdowns, but it could not handle my huge amount of options (~7000)
That’s when I learned about Mantine multiselect and it’s “limit” attribute that works juste fine !

The only issue I have right now is with the inner search fonction.
My options have this kind of format:

• This_is_my_option_A
• This_is_my_bigger_option_A

On bootstrap dropdown:
writting “is my” would show both options
because each word is seen as a unique input. I am please with this kind of behaviour

On default mantine multiselect, it requires user to write down the “_”, and you cannot several pieces of the options.

I’ve seen here this should work for you: https://mantine.dev/core/multi-select/#options-filtering
that it is possible to change the filtering options, the example shows exactly what i’m looking for.

My problem is the following: “How do I do that from my Python Dash App?
I have not found a way to pass that filtering function as props from my python script.
(I have no experience in JS)

I want to make the log in button disappear after you’re signed into your account, but I can’t seem to get it right. I’ve tried with localStorage and sessionStorage, but neither have worked. What am I doing wrong?

Login:

var objPeople = [{
    username: "#",
    password: "#"
  },
  {
    username: "#",
    password: "#"
  },
  {
    username: "test",
    password: "123"
  }
]

function getInfo() {
  var username = document.getElementById("username").value
  var password = document.getElementById("password").value

  for (var i = 0; i < objPeople.length; i++) {
    if (username == objPeople[i].username && password == objPeople[i].password) {
      console.log(username + "is logged in.")
      window.location.href = "homepage.html"
      localStorage.setItem("signedIn", 1);
    }

  }
  console.log("Username/password is incorrect.")
}

Homepage:

const signedInTrue = localStorage.setItem("signedIn")
if (signedInTrue= 1) {
    document.getElementById("topNav").style.display = "block"
}

I’m currently creating a Simple Pomodoro timer. I have a function to start the countdown, and it only works on the first 25 minute timer. When I use it for the others (break times), it does not work. Not only the startCountdown() function but also the functions which activates an icon.

HTML:

   <div id="break" style="display: none">
            <div id="outerBorder">
                <div id="bodybg"> 
                    <div class="absButtonBreak">
                            <img id="fiveMin" src="Objects/buttonsBreak/5m.png" onclick="showPage('forFive')">
                        <img id="ftnMin" src="Objects/buttonsBreak/15m.png" onclick="showPage('forFifteen')">
                        <img id="thrtMin" src="Objects/buttonsBreak/30m.png" onclick="showPage('forTwenty')">
                    </div>
                        <img src="Objects/Back.png" class="buttonBack" onclick="showPage('pg1')">
                    </div>
                </div>
            </div>
        </div>
<!-- There's a page called "break" where "forFive" is in-->
    <div id="forFive" style="display: none;">
        <div id="outerBorder">
            <div id="bodybg">
                <img id="catBus" src="Objects/Icon_CatBus/catBus1.png" class="icon_CB">
                <div id="timer">
                    <img id="minTens" class="digit">
                    <img id="minOnes" class="digit">
                    <span>:</span>
                    <img id="secTens" class="digit">
                    <img id="secOnes" class="digit">
                </div>
                <div class="buttonsTimer">
                    <img id="strtBtn5" src="Objects/Strt.png" class="buttonStart">
                    <img id="stop" src="Objects/Stop.png" class="buttonStop" onclick="showPage('break')">
                </div>
                <img id="back" src="Objects/Back.png" class="buttonBack" >
            </div>
        </div>
    </div>`

JS:

let timer;
let mins = 0;
let secs = 0;

function startCountdown(m, s) {
  clearInterval(timer);
  mins = m;
  secs = s;

  setDigit("minTens", Math.floor(mins / 10));
  setDigit("minOnes", mins % 10);
  setDigit("secTens", Math.floor(secs / 10));
  setDigit("secOnes", secs % 10);

  timer = setInterval (() => {
    if (secs === 0 && mins === 0) {
      clearInterval(timer);
      const icon = document.getElementById("catBus");
      icon.src = "Objects/Icon_CatBus/catBus1.png";
    } else {
      if (secs === 0) {
        mins--;
        secs = 59;
      } else {
        secs--;
      }
      setDigit("minTens", Math.floor(mins / 10));
      setDigit("minOnes", mins % 10);
      setDigit("secTens", Math.floor(secs / 10));
      setDigit("secOnes", secs % 10);
    }
  }, 1000);
}

//some other things

  

This is what I did in order to categorize it by time:

  document.getElementById("strtBtn25").addEventListener("click", () => {
    startCountdown(25,0);
    activateIconCB();
  })

  document.getElementById("strtBtn5").addEventListener("click", () => {
    startCountdown(5,0);
    activateIconCB();
  })

How do I make the functions to work for other divs/ids or whatever you call them? (trying to make strtBtn5 also work like strtBtn25)

I need to change the Information on a site, i have to login to my already and still existing account with my phone number but the site doesnt officially support my Region anymore if i try to login, the Textfield where my phone number has to be written, has a fixed “+XX” region code which is different to mine…

Hello, a few years ago i saw a Tutorial where someone explained how to Change the Price Value of a Shoppingbasket. So he added as example 1x eBook with a price of 1,99$, then he went to the basket, goes to payment and wenn the “Final”, “Pay Now” Button came he did somethin with a tool which i suddenly forgot the name of -.-‘…so he pressed the Button and then changed the price which gets send to PayPal i think it was, then the PayPal Payment Window opens with a price of 0,01$…so i dont want to do that exactly but ive registered on a webpage a few years Ago, I used to be able to register with my regional cell phone number, which is unfortunately no longer the case. However, I can no longer enter my cell phone number for verification to log in because the text field has a fixed region code (“+XX”). I would like to circumvent this by using the method described at the beginning and sending my cell phone number and region code to the server so that I can at least log in. I’m also interested in the process after thinking about it.

I hope my English isn’t too bad and someone can help me with my problem.

Regards

If today is 04/27, the user can input today and previous dates but not 04/28. if today is 04/28, the user can input today and previous dates but not 04/29 and so forth.

This is the form (without styles) I’ve been doing. The only thing that doesn’t work is the date

The user inputs the date through an input type date

function validform() {

  const nombre = document.getElementById("nombre").value;
  const apellido1 = document.getElementById("apellido1").value;
  const movil = document.getElementById("movil").value;
  const dni = document.getElementById("dni").value;
  const cumple = document.getElementById("cumple").value;

  const nombreErr = document.getElementById("nombreErr");
  const apellidoError = document.getElementById("apellidoError");
  const movilError = document.getElementById("movilError");
  const dniError = document.getElementById("dniError");
  const cumpleError = document.getElementById("cumpleError")

  const regexMovil = /^[6789]d{8}$/;
  const regexdni = /^[0-9]{8}[TRWAGMYFPDXBNJZSQVHLCKE-trawagmyfpdxbnjzsqvhlcke]$/;
  const hoy = new Date();

  nombreErr.textContent = "";
  apellidoError.textContent = "";
  movilError.textContent = "";
  dniError.textContent = "";
  cumpleError.textContent = "";

  let Valido = true;

  if (nombre === "") {
    nombreErr.textContent = "Introduce un nombre!!";
    Valido = false;
  }

  if (apellido1 === "") {
    apellidoError.textContent = "Introduce el primer apellido!!";
    Valido = false;
  }

  if (!regexMovil.test(movil)) {
    movilError.textContent = "Introduce un móvil válido!!";
    valido = false;
  }

  if (!regexdni.test(dni)) {
    dniError.textContent = "Introduce un DNI válido!!";
    valido = false;
  }

  if (cumple > hoy) {
    cumpleError.textContent = "Introduce una fecha que no sea mayor a la de hoy!!";
    valido = false;
  }

  if (Valido) {
    alert("formulario enviado correctamente");
    return true;
  } else {
    return false;
  }
}

<div class="formulario">
  <form id="formulario" name="formulario" onsubmit="return validform()" onreset="resetform()">
    <fieldset>
      <legend>Formulario de registro</legend>
      <p>Los campos marcados con asterisco(*) son obligatorios</p>
      <h1>Nombre y apellidos</h1>

      <label for="nombre">Nombre*</label><br>
      <input type="text" id="nombre" name="nombre"><br>
      <span id="nombreErr" class="error"></span><br>

      <label for="apellido1">Primer apellido*</label><br>
      <input type="text" id="apellido1" name="apellido1"><br>
      <span id="apellidoError" class="error"></span><br>

      <label for="apellido2">Segundo apellido</label><br>
      <input type="text" id="apellido2" name="apellido2"><br>

      <h1>Número de teléfono</h1>
      <label for="movil">Teléfono movi*</label><br>
      <input type="text" id="movil" name="movil"><br>
      <span id="movilError" class="error"></span><br>
      <label for="fijo">Teléfono fijo</label><br>
      <input type="text" id="fijo" name="fijo"><br>

      <h1>DNI</h1>
      <label for="dni">Número de DNI*</label><br>
      <input type="text" id="dni" name="dni"><br>
      <span id="dniError" class="error"></span><br>

      <h1>Cumpleaños</h1>
      <label for="cumple">Fecha de nacimiento</label><br>
      <input type="date" id="cumple" name="cumple">
      <span id="cumpleError" class="error"></span><br>

      <div class="botones2">
        <input type="checkbox" name="terminoss" id="terminoss">Acepto los términos y blah, blah, blah<br>
        <input type="checkbox" name="spam" id="spam">Quiero que me llenéis el correo de spam<br>
      </div>
      <div class="botones">
        <input type="reset" value="Reset" id="Reset">
        <input type="submit" value="Enviar" id="Enviar">
      </div>
    </fieldset>
  </form>
</div>

I’m working on a Node.js project and express is not found when I use it in server.js.

This is what I see when I run pm2 logs. In pm2 the only active process is server.js

/home/ec2-user/.pm2/logs/server-error.log last 15 lines:
0|server   | Require stack:
0|server   | - /home/ec2-user/Large-eCommerce-website-in-progress-/server.js
0|server   |     at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
0|server   |     at Hook._require.Module.require (/usr/lib/nodejs18/lib/node_modules/pm2/node_modules/require-in-the-middle/index.js:81:25)
0|server   |     at require (node:internal/modules/helpers:177:18)
0|server   |     at Object.<anonymous> (/home/ec2-user/Large-eCommerce-website-in-progress-/server.js:1:17)
0|server   |     at Module._compile (node:internal/modules/cjs/loader:1364:14)
0|server   |     at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
0|server   |     at Module.load (node:internal/modules/cjs/loader:1203:32)
0|server   |     at Module._load (node:internal/modules/cjs/loader:1019:12)
0|server   |     at Object.<anonymous> (/usr/lib/nodejs18/lib/node_modules/pm2/lib/ProcessContainerFork.js:33:23)
0|server   |     at Module._compile (node:internal/modules/cjs/loader:1364:14) {
0|server   |   code: 'MODULE_NOT_FOUND',
0|server   |   requireStack: [ '/home/ec2-user/Large-eCommerce-website-in-progress-/server.js' ]
0|server   | }

This is what I get when I run node server.js:

node:internal/modules/cjs/loader:1143
  throw err;
  ^

Error: Cannot find module 'express'
Require stack:
- /home/ec2-user/Large-eCommerce-website-in-progress-/server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
    at Module._load (node:internal/modules/cjs/loader:981:27)
    at Module.require (node:internal/modules/cjs/loader:1231:19)
    at require (node:internal/modules/helpers:177:18)
    at Object.<anonymous> (/home/ec2-user/Large-eCommerce-website-in-progress-/server.js:1:17)
    at Module._compile (node:internal/modules/cjs/loader:1364:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [ '/home/ec2-user/Large-eCommerce-website-in-progress-/server.js' ]
}

This is the content of the json package:

{
  "name": "devsite",
  "version": "1.0.0",
  "main": "server.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node server.js",
    "build": "echo 'No build step required for backend'"
  },
  "author": "bogdan",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@aws-sdk/client-s3": "^3.772.0",
    "aws-amplify": "^6.13.6",
    "aws-sdk": "^2.1692.0",
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.20.3",
    "chokidar": "^4.0.3",
    "cookie-parser": "^1.4.7",
    "cors": "^2.8.5",
    "crypto": "^1.0.1",
    "dotenv": "^16.4.7",
    "express": "^5.1.0",
    "express-session": "^1.18.1",
    "jsonwebtoken": "^9.0.2",
    "mime": "^4.0.7",
    "multer": "^1.4.5-lts.1",
    "multer-s3": "^3.0.1",
    "passport": "^0.7.0",
    "passport-apple": "^2.0.2",
    "passport-facebook": "^3.0.0",
    "passport-google-oauth20": "^2.0.0",
    "pg": "^8.13.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "sharp": "^0.34.1",
    "stripe": "^17.6.0",
    "uuid": "^11.0.5"
  },
  "devDependencies": {
    "@aws-amplify/backend": "^1.14.3",
    "@aws-amplify/backend-cli": "^1.5.0",
    "aws-cdk": "^2.1003.0",
    "aws-cdk-lib": "^2.180.0",
    "constructs": "^10.4.2",
    "esbuild": "^0.25.1",
    "tsx": "^4.19.3",
    "typescript": "^5.8.2"
  }
}

This line of code causes the error:

const express = require('express');

This happens regardless of whether I use import or require.

The required modules, including express, are listed in my package.json under dependencies, and I’ve run npm install several times to ensure they are installed. Additionally, when I used import, the type field in package.json was set to module.

Despite these efforts, the error persists. I’ve also tried clearing the npm cache and restarting the server, but it hasn’t resolved the issue.

Steps taken:

-Switched from import to require.

-Verified that express is listed in package.json under dependencies.

-Installed dependencies using npm install.

-Restarted the app and cleared npm cache.

-I also used

ls node_modules/express 

and it shows:

LICENSE lib node_modules.

-I also used:

rm -rf node_modules package-lock.json
npm install

All this for nothing

Environment:

-Node.js version: v18.20.6

-PM2 version: 6.0.5

-Express version: 5.1.0

-NPM version: 10.8.2

I’ve been struggling with this problem for a few days and I still haven’t found a solution. I’d deeply appreciate any help. I’ve posted this question before but unfortunately I haven’t found a solution yet. Thanks!