I can't solve the error "Uncaught SyntaxError: Unexpected token '<'"

Question

JS:

import React from "react";
import { ReactDOM } from "react";
import './style.css';
import App2 from "./App2.js";

function App() {
    return (
        <App2.js />
    )
}

ReactDOM.render(<App />, document.getElementById('root'))

Referred App2.js in the above file:

import React from "react";
import { ReactDOM } from "react";

export default function App2() {
    return (
        <div>
            <h1>Yusif Ahmedov</h1>
            <button id="email"></button>
            <button id="linkedin"></button>
            <h2>Front-End Developer</h2>
            <header id="about-header">About</header>
            <p id="about">I am a front-end developer who is passionate about coding and engaging both creative and practical side of the human potential.</p>
            <header id="interests-header">Interests</header>
            <p id="interests">Productivity articles, Time Management, Coffee, Music, Sports, Social Activities.</p>
        </div>
    )
    }

And simple HTML:

<!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>My Card</title>
    <script type="module" src="./App.js" defer></script>
</head>
<body>
    <div id="root"></div>
</body>
</html>

I wrote all from scratch and so there are no extra files. When I run it, it gives an error: Uncaught SyntaxError: Unexpected token '<' App.js:8(line)

I didn't get it why it gives an error on the 8th line.

JSX is an extension to JavaScript. Check if your JSX parser/transpiler (e.g. Babel) set up correctly. — FZs
– FZs, Commented Jan 15, 2022 at 13:10

Quentin · Accepted Answer · 2022-01-15 12:55:22Z

3

Browsers do not support JSX, you have to transpile your JSX into regular JS.

It is possible to do this client-side, in the browser, but then you also need to deal with the lack of support for Node.js module resolution (which you code assumes with its use of ES6 modules accesses via extensionless filenames instead of URLs).

Your code is designed to be transpiled and bundled for use in the browser with tools like Babel and Webpack. You need to set them up and run them in your local development environment.

This is described in the official React tutorial

Aside: <App2.js /> is also an error since (a) identifiers can't have a . in them and (b) you named it App2 when you imported it from ./App2.js.

answered Jan 15, 2022 at 12:55

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

I can't solve the error "Uncaught SyntaxError: Unexpected token '<'"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related