未捕获的语法错误：意外的标记 '<' customEmoji.js:1

如何解决未捕获的语法错误：意外的标记 '<' customEmoji.js:1

我们正在制作一个聊天网络。 我用node js express、socket.io打开服务器，出现照片等错误。 我们还没有实现聊天，正在通过server.js打开服务器，出现这个错误。 我们如何解决这个问题？如何解决？

enter image description here

enter image description here

enter image description here

enter image description here

//server.js
var express = require('express');
var app = express(); 

var http = require('http');
var server = http.Server(app);

var socket = require('socket.io');
var io = socket(server); 

var port = 5000;

app.use('/',function(req,resp) {
resp.sendFile(__dirname + '/customEmoji.html');
});

io.on('connection',function(socket) {
console.log('User Join');
});

server.listen(port,function() {
console.log('Server On !');
});

var emoji_id;


/*function readTextFile(file,callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET",file,true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}*/
$(function(){   
/*    emoji_id = $("#emoji_navigator > a").attr("id");     
    console.log(emoji_id);
    var str = "C:\\Users\\SeaOne\\Downloads\\"  + emoji_id + ".json";  
    console.log(str);

      //usage:
      readTextFile("C:\\Users\\SeaOne\\Downloads\\campuslife.json",function(text){
          var data = JSON.parse(text);
          console.log(data);
      });
*/
// 입력창에 아무 입력도 없을 경우 'Add comment'를 기본으로 세팅
 var input_area_default = $('#input_Box').html();

 if(input_area_default == ''){
   var default_text = 'Add Text';
   $('#input_Box').html(default_text)
 }
});

//esc 누르면 popup div가 사라짐
$(document).on("keyup",function() {
  if (event.keyCode === 27 || event.keyCode === 13) {
    $("#emoji_popup").css({"display":"none"});
      }
});

//입력을 시작하면 기본 세팅인 'Add comment'를 제거
$(document).on("focus","#input_Box",function() {

  var input_area_default = $('#input_Box').html()

  if(input_area_default == 'Add Text'){
    $('#input_Box').html('')
  }

});

//이모지 버튼에 마우스 올리면 표정 바뀜
$(document).on("mouseenter",".emoji_pickup",function() {

    $('#emoji_pickup_before').css("display","none");
    $('#emoji_pickup_after').css("display","block");
  }).on("mouseleave",function() {
    $('#emoji_pickup_after').css("display","none");
    $('#emoji_pickup_before').css("display","block");
  });

//이모지 버튼 클릭시 이모지 목록 popup
$(document).on("click",function(){

  // popup div의 size를 가져와서 위치 선정에 활용
  var popupdiv_width = $('#emoji_popup').width();
  var popupdiv_height = $('#emoji_popup').height();

  // popup div의 위치를 설정
  var position = $('.input').position();
  var Boxsize = $('.input').height();
  $('#emoji_popup').css("left",position.left);
  $('#emoji_popup').css("top",position.top-popupdiv_height);
  $("#emoji_popup").css("background-color","#FFFFFF")
  $('#emoji_popup').css("display","block");

}).on("click","#emoji_popup",function(){
   $("#emoji_popup").css({"display":"none"});
});

//emoji_pick
$(document).on("click",".emoji_list",function(e) {
   var customemo_width = $("#custom_emoji").width();
   var customemo_height = $('#custom_emoji').height();
   
   var position = $('.input').position();
   var Boxsize = $('.input').height();
   $('#custom_emoji').css("left",position.left);
     $('#custom_emoji').css("top",position.top-customemo_height);
     $("#custom_emoji").css("background-color","#FFFFFF")
     $('#custom_emoji').css("display","block");
   
   var emoji_id = $(this).attr('id');
     var imgtag = '<img id = "emo" style="width:120px; height:120px;" src="img//' + emoji_id + '.png">';
     $('#custom_emoji').append(imgtag);
     $('#custom_emoji').focus();

}).on("keyup",function(){
   if(event.keyCode === 13){
      $("#custom_emoji").css({"display":"none"});
      $("#emo").detach();
   }
});



$(document).on("click",function(e) {

  var input_area_default = $('#input_Box').html()
  if(input_area_default == 'Add Text'){
    $('#input_Box').html('')
  }
  var emoji_id = $(this).attr('id');
  var imgtag = '<img style="width:120px; height:120px" src="img/' + emoji_id + '.png">';
  $('#input_Box').append(imgtag+'<br/>');
  $('#input_Box').focus();
});



// Enter 키를 입력할 경우 전송처리
$(document).on("keyup",function() {

  var inputarea = $('#input_Box');
  inputarea.scrollTop(inputarea[0].scrollHeight);
  if (event.keyCode === 13) {
    var input_area_default = $('#input_Box').html();
    $('#input_Box').html('');
    $('#msg').append(input_area_default);
    var textarea = $('#msg');
    textarea.scrollTop(textarea[0].scrollHeight);
  }
});

@charset "utf-8";

#msg{
  border: 1px white solid;
  width: 400px;
  height: 650px;
  background-color : #525252;
  /*margin-left: 50px;*/
  font-size : 20px;
  overflow: auto;
  margin: auto;
  color : white;
  text-align : right;
}

#input_Box{
  border: 1px white solid;
  width: 350px;
  height: 40px;
  overflow: auto;
  margin-top: 8px;
  padding-left: 5px;
  padding-top: 8px;
  color : white;
}
.input{
    width: 350px;
    height : 50px;
    display: inline-block
}

.send {
    width: 400px;
    height : 50px;
    margin: auto;
    background-color : #525252;
}

.emoji{
    width: 32px;
    display: inline-block;
    margin : 5px;
}
.emoji_pickup{
  cursor: pointer;
  display : block;
}

#emoji_pickup_before{
  margin-top: 5px;
  margin-right: 10px
}

#emoji_pickup_after{
  margin-top: 5px;
  margin-right: 10px;
  display: none
}

#emoji_popup{
  display: none;
  margin-top : -250px;
  border: 1px #ffcd05 solid;
  width: 400px;
  height: 200px;
  overflow: auto;
}

#custom_emoji{
  display: none;
  margin-top : -250px;
  border: 1px #ffcd05 solid;
  width: 400px;
  height: 200px;
  overflow: auto;
}
#menu {
    display : inline-block;
}
.button {
    margin-left : 5px;
    display : block;
    border : 1px solid black;
    color : black;
    background : none;
    font-size : 1.2em;
    margin-top : 7px;
    
}

#emo {
    position: absolute;
    margin-top : 40px;
    margin-left : 25px;
}

#emoji_navigator{
  border-bottom: 1px #ffcd05 solid;
}

#emoji_tooltip{
  display: none;
  border: 1px #ffcd05 solid
}

.navigator{
  border: 1px #FFFFFF solid;
  cursor: pointer;
  margin: 1px;
  width: 32px;
  height: 32px
}

.navigator:hover{
  border: 1px #CECEF6 solid;
  cursor: pointer;
  margin: 1px;
  width: 32px;
  height: 32px
}

.emoji_list{
  border: 1px #FFFFFF solid;
  cursor: pointer;
  margin: 1px;
  width: 120px;
  height: 120px;
}


.emoji_list:hover{
  border: 1px #CECEF6 solid;
  cursor: pointer;
  margin: 1px;
  width: 120px;
  height: 120px;
}

/* Scroll Bar */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>Chatting_Web</title>
<script type="text/javascript" src="/customEmoji.js"></script>
<link href="/customEmoji.css" type="text/css" rel="stylesheet"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
 <!-- <script type="text/javascript" src="http://requirejs.org/docs/release/2.3.2/minified/require.js"></script> -->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
 <script src="https://cdn.socket.io/socket.io-1.0.0.js"></script>
</head>
<body style = 'background-color : #2b2b2b'>
<br/>
<div class = "Box" >
    <div class = "chat">
      <div id="msg"></div>
          <div class = "send">
                <div class = "input">
                  <div id="input_Box" contenteditable="true"></div>
                </div>
                <div class = "emoji">
                  <img class="emoji_pickup" id="emoji_pickup_before" src="img/1f642.png" style="width: 40; ">
                  <img class="emoji_pickup" id="emoji_pickup_after" src="img/1f600.png">
                  </div>
            <div id="emoji_popup" style ="z-index : 1">
                    <div id="emoji_navigator"> 
                      <a href="#people" id="campus"><img style="margin-left: 6px" class="navigator" id="nav_people" src="img/campus2.png" /></a>
                    </div>
                    <!-- emoji popup div start -->
                    <div id="people"><h5>대학일기</h5></div>
                    <img class="emoji_list" id="campus1" src="img/campus1.png" />
                    <img class="emoji_list" id="campus2" src="img/campus2.png" />
                    <img class="emoji_list" id="campus3" src="img/campus3.png" />
                    <img class="emoji_list" id="campus4" src="img/campus4.png" />
                    <img class="emoji_list" id="campus5" src="img/campus5.png" />
                    <img class="emoji_list" id="campus6" src="img/campus6.png" />
                    <img class="emoji_list" id="campus7" src="img/campus7.png" />
                    <img class="emoji_list" id="campus8" src="img/campus8.png" />
                    <img class="emoji_list" id="campus9" src="img/campus9.png" />
                    <img class="emoji_list" id="campus10" src="img/campus10.png" /> </div>
   
                    <!-- emoji popup div end -->
    
                  <div id="custom_emoji" style ="z-index : 2">
                     <div id = "menu">
                        <div id = "menu_bnt">
                           <button class = "button">텍스트 삽입</button>
                           <button class = "button">보내기</button>
                        </div>
                     </div>
                  </div>
              </div>
        </div>
  </div>
</div>
</body>
</html>