Uncaught SyntaxError: Unexpected token '<'

Question

I'm getting a very strange issue. When I open index.html(see below) in the browser, The DOM elements are rendering correctly, but I'm getting this console error:

Uncaught SyntaxError: Unexpected token '<'

To make sure the error is not coming from any code in my JavaScript, I emptied my JavaScript file so it had no code in it. So this is not any "code-in-javascript" related issue
What is it?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>HAHAHA</h1>
  <script type="text/javascript" src="./src/index.js"></script>
</body>
</html>

Answer 1

Finally I figured out the error. I was using npm live-server package. When I used live-server provided by vs-code as an extension, the issue is gone. It's working perfectly fine now.

Answer 2

Change the script type to "text/babel" and the error will resolve.

<script type="text/babel" src="./src/index.js"></script>