CODEWITHSUNDEEP
javascripthtmlnpm-live-server
PSR
PSR

Reputation: 261

Uncaught SyntaxError: Unexpected token '<' with createRoot

I am starting to work with HTML CSS and JS to build a website. I am facing this issue in the main.js file. Below are the contents of main.js

import React from 'react';
import Navbar from '../components/Navbar';
import { createRoot } from 'react-dom'; 

createRoot(document.getElementById('root')).render(<Navbar />);

In components directory i have a Navbar.js file. Below are contents of Navbar.js

import React, { useState, useEffect } from 'react';
import DarkModeToggle from './DarkModeToggle';

const Navbar = () => {
    const [isDarkMode, setIsDarkMode] = useState(false);

    const toggleDarkMode = () => {
        setIsDarkMode(prevMode => !prevMode);
    };

    useEffect(() => {
        if (isDarkMode) {
            document.body.classList.add('dark-mode');
        } else {
            document.body.classList.remove('dark-mode');
        }
    }, [isDarkMode]);

    return (
        <nav className={`navbar ${isDarkMode ? 'dark-mode' : ''}`}>
            <button className="circular-button">
                <img src="icons/menu_black.png" alt="Menu" title="Menu" />
            </button>
            <span className={`navbar-text ${isDarkMode ? 'dark-mode' : ''}`}>Orange</span>
            <button className="circular-button">
                <img src="icons/notif_bell_black.png" alt="Notifications" title="Notifications" />
            </button>
            <DarkModeToggle isDarkMode={isDarkMode} toggleDarkMode={toggleDarkMode} />
            <button className="circular-button">
                <img src="icons/person_black.png" alt="Profile" title="Profile" />
            </button>
        </nav>
    );
};

export default Navbar;

main.js is inside scripts/ directory and Navbar.js is inside components/ directory, both these directories are inside a parent directory called fend/ . when i start a live-server --port=9000 in the fend/ directory I am able to see scripts/ components/ directories. Additionally I also have pages/ directory with the above which contains index.html and dashboard.html . though scripts/ and components/ directories open to reveal the files in them and I am able to view them in raw format in the browser, on opening the pages/ directory I don't see anything (empty screen). When i check the Console, I see this error

Uncaught SyntaxError: Unexpected token '<'

Below are the contents of index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navbar with Tooltips</title>
    <link rel="stylesheet" href="../styles/main.css">
</head>
<body>
    <div id="root"></div>
    <!-- Specify type="module" for main.js -->
    <script src="../scripts/main.js" type="module" defer></script>
</body>
</html>

I have checked the header for main.js and its application/javascript. On attempting to debug the issue the only fixes i could find are to check the relative paths mentioned in the files and also to check the headers(part), both of which don't seem to be the issue.

Please assist with resolution.

Upvotes: 0

Views: 72

Answers (1)

Ashish Shevale
Ashish Shevale

Reputation: 381

The React component that you have created in Navbar.js contains code in a special syntax called JSX. Any HTML-like code that you write in your .js files is called JSX, like the following.

<div></div>
<Navbar />

Since the browser cannot understand JSX directly, you need to setup an intermediate step that converts the JSX to something the browser can understand.

Check out this stackoverflow answer on how to compile JSX to JS.

Another option would be to use create-react-app or setup your own webpack configuration.

You can also re-write the JSX as plain JS manually. This involves rewriting your components using the following syntax -

import { createElement } from 'react';

function NavBar({ name }) {
  return createElement(
    'nav',
    { className: 'dark-mode' },
    createElement(/* add contents of the nav tag using similar syntax */),
  );
}

This is exactly what babel or create-react-app or webpack config will do. This syntax is not easy to read, so its better to go with the previous options.

For more information on the createElement syntax checkout the official react docs

Upvotes: 1

Related Questions