I was creating a multiplayer wordle and am getting this error:
Uncaught TypeError: Failed to resolve module specifier "socket.io-client". Relative references must start with either "/", "./", or "../".
The code is running fine when i run the client locally but not when i host the client side on netlify or github.
The following is the server side code:
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = socketIo(server, {
cors: {origin: ["https://h4r5h-10.github.io/private-test/"],}
});
const PORT = process.env.PORT || 3000;
var tempArr = [];
console.log(tempArr)
var index; var correctWord;
io.on('connection', socket => {
// console.log(socket.id);
socket.on("disconnect", ()=>{
const ind2 = tempArr.findIndex((obj) => obj.p1 == socket.id || obj.p2 == socket.id);
if(ind2 != -1){
tempArr.splice(ind2,1);
}
})
// io.emit("sendword", correctWord);
socket.on("submitguess", (arr, room) =>{
socket.to(room).emit("sendtiles", arr);
})
socket.on("join-room", room =>{
const ind1 = tempArr.findIndex((obj)=> obj.room == room);
const ind2 = tempArr.findIndex((obj)=> obj.p1 == socket.id);
// const ind3 = tempArr.findIndex((obj)=> obj.p2 == socket.id);
if(ind1 !== -1 && tempArr[ind1].p1 && tempArr[ind1].p2) {
socket.emit("room-full")
return
}
socket.join(room);
var count = 0;
if(ind1 == -1)
{
index = Math.floor(Math.random() * dictionary.length);
correctWord = dictionary[index];
tempArr.push({room: room, p1: socket.id, p2: null, correctWord: correctWord});
socket.emit("sendword", correctWord);
count = 1;
}
else if(ind2 !== -1){
count = 1;
}
else if(ind1 !== -1 && ind2 == -1){
tempArr[ind1].p2 = socket.id;
socket.emit("sendword", correctWord);
}
io.to(room).emit("waiting-room", count);
console.log(tempArr);
})
socket.on("socket-win", (id, room) => {
const ind2 = tempArr.findIndex((obj) => obj.p1 == id || obj.p2 == id);
socket.to(room).emit("shut-down", ind2);
tempArr.splice(ind2,1);
})
socket.on("socket-exhaust", (id, room) => {
const ind2 = tempArr.findIndex((obj) => obj.p1 == id || obj.p2 == id);
socket.to(room).emit("exhaust-out", ind2);
tempArr.splice(ind2,1);
})
})
server.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
The following is client side code: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Wordle Multiplayer</title>
<link rel="stylesheet" href="styles.css" />
<script type="module" src="index.js" defer></script>
<!-- <script src="/socket.io/socket.io.js"></script> -->
<script type="/module" src="https://cdn.socket.io/4.7.5/socket.io.esm.min.js"></script>
</head>
<body>
<div class="restart-container hide" data-restart-con>
<div class="btn-container">
<button class="btn" onclick="window.location.reload()">New Game</button>
<a href="../../index.html"><button class="btn">Menu</button></a>
<button class="btn close" onclick="closeRestart()">Close</button>
</div>
</div>
<div class="join-container">
<div class="join-btn-container">
<input type="text" class="room-code" placeholder="Enter Room Name">
<button class="btn play">Play Game</button>
</div>
</div>
<div class="alert-container" data-alert-con></div>
<div class="grid-container">
//code
</div>
</body>
</html>
index.js
import io from "socket.io-client";
var room = "";
var arr = [];
var correctWord = "";
const guessGridYou = document.querySelector(".grid.you");
const guessGridOpp = document.querySelector(".grid.opponent");
const keyboard = document.querySelector(".keyboard");
const socket = io("https://wordle-server-application.glitch.me/", {headers: { "user-agent": "Google Chrome"}})
I tried all the past answers but they arent working.