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

Question

JS: 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:上述文件中引用了 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>
    )
    }

And simple HTML:还有简单的 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)当我运行它时，它给出了一个错误： Uncaught SyntaxError: Unexpected token '<' App.js:8(line)

I didn't get it why it gives an error on the 8th line.我不明白为什么它在第 8 行出现错误。

Answer 1

Browsers do not support JSX, you have to transpile your JSX into regular JS.浏览器不支持 JSX，你必须将你的 JSX 转换成普通的 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).可以在浏览器中执行此客户端，但您还需要处理缺乏对 Node.js 模块解析的支持（您的代码假定它使用 ES6 模块通过无扩展名文件名而不是 URL 进行访问）。

Your code is designed to be transpiled and bundled for use in the browser with tools like Babel and Webpack.您的代码旨在通过 Babel 和 Webpack 等工具在浏览器中进行转译和捆绑使用。 You need to set them up and run them in your local development environment.您需要设置它们并在本地开发环境中运行它们。

This is described in the official React tutorial这在官方 React 教程中有描述

Aside: <App2.js /> is also an error since (a) identifiers can't have a .另外： <App2.js />也是一个错误，因为 (a) 标识符不能有. in them and (b) you named it App2 when you imported it from./App2.js.在它们中，并且 (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