const io = require('socket.io') is expression is not callable - node.js

Question

This is my index.js on the server side
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const PORT = process.env.PORT || 5000;
const router = require('./router');
const io = require('socket.io')(server, {
cors: {
origin: '*',
}
});
io.sockets.on('connection', (socket) => {
console.log('We have a new connection');
socket.on('join', () => {
console.log(name, room);
});
socket.on('disconnect', () => {
console.log('User left!!');
});
},)
app.use(router);
server.listen(PORT, () => console.log(`Server Started at ${PORT}`));
It throws an error of this function not callable. Also,
This is my Chat.js (Chat Component) on the client-side.
import React, {useState, useEffect} from 'react';
import queryString from 'query-string';
import io from 'socket.io-client';
import './Chat.css';
let socket;
const Chat = ( { location }) => {
const [name, setName] = useState("");
const [room, setRoom] = useState("");
const ENDPOINT = 'localhost:5000';
socket = io.connect(ENDPOINT);
useEffect(() => {
const {name, room} = queryString.parse(location.search);
setName(name);
setRoom(room);
socket.emit('join', { name, room });
}, [ENDPOINT, location.search]);
return (
<h1>Chat</h1>
)
};
export default Chat;
The major problem I am facing here is that the useEffect is getting called multipile times even after I initilaized an array.

Answer 1

What you need to do is to define and connect to it socket-client on App.js instead of initializing it in Chat.js. In Chat.js, you just need to create its object. It should solve the issue of multiple useEffect calls.
**Edit
In App.js add these lines to intialize and connect
import io from 'socket.io-client';
let socket;
const ENDPOINT = 'localhost:5000';
socket = io.connect(ENDPOINT);
And In Chat.js use below code at its respective place to emit events
import io from 'socket.io-client';
let socket;
socket.emit('join', { name, room });