我无法解决错误“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'))

上述文件中引用了 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 '<' App.js:8(line)

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

Answer 1

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

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

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

这在官方 React 教程中有描述

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

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

问题描述

1 个解决方案

解决方案1
3 已采纳 2022-01-15 12:55:22

我无法解决错误“Uncaught SyntaxError: Unexpected token '&lt;'”

问题描述

1 个解决方案

解决方案1 3 已采纳 2022-01-15 12:55:22

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

解决方案1
3 已采纳 2022-01-15 12:55:22