Why does it show Uncaught SyntaxError: Unexpected token '<' (at index.js:5:5) in the live server

Question

After rendering the code below, the console of the live server shows the following error "Uncaught SyntaxError: Unexpected token '<' (at index.js:5:5)"

    import React from "react"
    import ReactDOM from "react-dom"
    
    const page=(
    <div>
    <h1>My awesome website in React</h1>
    <h2>Reasons I love React</h2>
    <ol>
        <li>Its composable</li>
        <li>Its declarative</li>
        <li>Its a hireable skill</li>
        <li>Activley maintained by skilled people</li>
    </ol>
    </div>
    )

    ReactDOM.render(page,document.getElementById("root"))

Answer 1

The JSX is causing the issue.

Assuming you’re using live server in VSCode, live server has no concept of JSX; it doesn’t transpile, and it can’t read. You need to use webpack, rollup, etc.

create-react-app and vite are the most commonly used tools for this. Otherwise, you’d have to set up all the transpiling with babel or the aforementioned tools on your own.

Remember, JSX isn’t valid JS, HTML, etc.