ReferenceError: io is not defined

Question

I'm getting this error in my javascript file when i try to run it on a nodeJS server using nodemon.

ReferenceError: io is not defined at Object. (C:\Users\Chaitanya\Desktop\appDir\Chiku\src\app\departmentlist\client.js:4:16) at Module._compile (internal/modules/cjs/loader.js:1137:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10) at Module.load (internal/modules/cjs/loader.js:985:32) at Function.Module._load (internal/modules/cjs/loader.js:878:14) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12) at internal/main/run_main_module.js:17:47 [nodemon] app crashed - waiting for file changes before starting...

I've even installed the socket io library using npm install socket.io-client --save

// const io = window.io = require('socket.io-client');


const socket = io('http://localhost:4200');

const form = document.getElementById('send-container');
const messageInput = document.getElementById('messageInp')
const messageContainer = document.querySelector(".container")

var audio = new Audio('sms_notification.mp3')

const append = (message, position)=>{   //jo naya join hoga uski notification aaegi in the form of message
    const messageElement = document.createElement('div');  
    messageElement.innerText = message;
    messageElement.classList.add('message'); //show message 
    messageElement.classList.add(position);  // show new user's position(left,right)
    messageContainer.append(messageElement);
    if(position =='left'){
    audio.play();
    }
}
form.addEventListener('submit', (e)=>{
    e.preventDefault();
    const message = messageInput.value;
    append(`You: ${message}`, 'right')
    socket.emit('send', message);
    messageInput.value = ''
})
 const name = prompt("Enter your name to join");
socket.emit('new-user-joined', name)  // new name will be accepted and executed by socket.on and will be displayed

socket.on('user-joined', name=>{
    append(`${name} joined the chat`, 'right')
})

socket.on('recieve', data=>{
    append(`${data.name}: ${data.message}`, 'left')
})

socket.on('left', name=>{
    append(`${name} left the chat`, 'left')
})

body{
    background-image: url("abc.jpg") ;
}

.logo{
display: block;
margin: auto;
width: 75px;
height: 75px;
}

h1{
    position: absolute;
    margin-top: 12px;
    font-size: 40px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    font-style: inherit;
    text-align: center;
    color:whitesmoke; 
    font-stretch: condensed;
}

.container12{
    max-width: 955px;
    background-color:whitesmoke;
    margin: auto;
    height: 60vh;
    padding: 33px;
    overflow-y: auto;
    margin-bottom: 23px;
}

.message{
    background-color:skyblue;
    width: 24%;
    padding: 10px;
    margin: 17px 12px;
    border: 2px solid burlywood;
    border-radius: 10px;
    font-family: cursive;
}

.left{
    float: left;
    clear: both;
}

.right{
    float: right;
    clear: both;
}

#send-container{
    display: block;
    margin: auto;
    text-align: center;
    max-width: 985px;
    width: 100%;
}

#messageInp{
    width: 100%;
    border: 2px solid black;
    border-radius: 6px;
    height: 34px;
}

.btn{
    cursor: pointer ;
    border: 2px solid black;
    border-radius: 6px;
    height: 34px;
}

<!DOCTYPE html>
<html lang = "en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Gap-Shap -Online chatting</title>
     <script defer src="http://localhost:4200/socket.io/socket.io.js"></script>   
     <script defer src="client.js"></script>
     <script scr="/socket.io/socket.io.js"></script>
     
     <link rel="stylesheet" href="departmentlist.component.css">
     <link rel="icon" type="image/jpg" href=".\chat.jpg">
     
 </head>   
 <body>


    
    
    <nav>
        <h1>Gap-Shap Online Chatting</h1>


        <img class="logo" src="chat.jpg">
    </nav>
    <div class="container12">
        
    </div>
    <div class="send">
        <form action="#" id="send-container">
            <input type="text" name="messageInp" id="messageInp">
            <button class="btn" type="submit">Send</button>
        </form>    
    </div>
    

    
 </body>
</html>

Well, you you made the io import a comment... so of course it's not defined then? — Zer0

Gabriel Lemon Gabriel Lemon · Accepted Answer · 2020-09-03T16:10:55

You said you're using nodemon, so this is a nodeJS script. You must import the socketIO first. This is typically at the beginning of the file,

const io = require('package-name');

ReferenceError: io is not defined

1 Answers