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

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.

CodePudding user response：

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.