我无法解决错误“Uncaught SyntaxError: Unexpected token '<'”答案

【问题标题】：I can't solve the error "Uncaught SyntaxError: Unexpected token '<'"我无法解决错误“Uncaught SyntaxError: Unexpected token '<'”
【发布时间】：2022-01-15 12:51:49
【问题描述】：

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'))

上述文件中引用的App2.js：

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>
    )
    }

还有简单的 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>

我都是从头开始写的，所以没有多余的文件。当我运行它时，它给出了一个错误： Uncaught SyntaxError: Unexpected token '

我不明白为什么它在第 8 行给出错误。

【问题讨论】：

不应该是<App2 /> 没有.extension！？
@luk2302 应该的。
JSX 是 JavaScript 的扩展。检查您的 JSX 解析器/转译器（例如 Babel）是否设置正确。

标签： javascript reactjs

【解决方案1】：

浏览器不支持 JSX，你必须将你的 JSX 转译成普通的 JS。

可以在浏览器中执行此客户端，但您还需要处理缺少对 Node.js 模块解析的支持（您的代码假设它使用 ES6 模块通过无扩展名文件名访问而不是 URL）。

您的代码旨在通过 Babel 和 Webpack 等工具进行转译和捆绑，以便在浏览器中使用。您需要设置它们并在本地开发环境中运行它们。

这是described in the official React tutorial

除此之外：<App2.js /> 也是一个错误，因为 (a) 标识符中不能有 .，并且 (b) 当您从 ./App2.js 导入它时将其命名为 App2。

【讨论】：