External JS not working but internal is working

The commented code is present in asyncJS.js and it is not working. If I remove the src from and uncomment the JS code then it is working fine, can anyone please help me with this concept.

<!DOCTYPE html>

<html>

<head>  

    <title>Async Programming</title>

</head>

<body>

   <div id = "text"></div>

   <script type="text/javascript" src="asyncJS.js">

    //sync programming

/*  let num = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let filteredVal = num.filter((item) => item > 4);

let divtext = document.querySelector('#text');

divtext.innerHTML = filteredVal;

console.log(filteredVal);*/

</script>

</body>

</html>

Error coming in Console of browser :

  • GET http://127.0.0.1:5500/asyncJS.js net::ERR_BLOCKED_BY_CLIENT

  • asyncJS.html:1 Unchecked runtime.lastError: The message port closed before a response was received.

  • asyncJS.html:41 WebSocket connection to ‘ws://127.0.0.1:5500/asyncJS.html/ws’ failed:

  • (anonymous) @ asyncJS.html:41

  • (anonymous) @ asyncJS.html:50