In an express.Js project i have socket.io installed for my server and socket.io-client for my client and the projected is bundled using webpack5.

in my client i have this code;

const { io } = require("socket.io-client");

const socket = io();

socket.on("connect", () => {
      console.log(socket.id);
});

and when i run the command to build it compiles without problems but in the browser i get the error ;

Uncaught ReferenceError: require is not defined

how can i fix this ?

i couldn't find a good answer here ; Socket.IO - require is not defined

thanks in advance.