问题：

未捕获的语法错误：意外令牌'

羊煜

2023-03-14

我正在尝试使用React创建一个简单的网站，但由于某些原因，它只显示一个空白页面。

显示在控制台日志上的错误是未捕获的语法错误：意外令牌

非常感谢。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>U4Ever</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="main.js" type="module"></script>
    </body>
</html>

主JS：

import React from "react"
import ReactDOM from "react-dom"
import _navbar from "./navbar.js"
import _body from "./body.js"

ReactDOM.render(<_navbar />, document.getElementById("root"))
ReactDOM.render(<_body />, document.getElementById("root"))

Navbar：

import React from "react"

function navbar() {
   return( 
    <navbar>
        <a href="#">Articles</a>
        <a href="#">Notes</a>
        <a href="#">Course</a>
        <a href="#">Brain</a>
        <a href="#">Newsletter</a>
        <a href="#">Facebook</a>
    </navbar>
   )
}


export default navbar

身体

 import React from "react"
    
        function body() {
            return (
                <div>
                    
                    <h1>Hi, I'm Me</h1>
                    
                    <p>Lorem Ipsum</p>   
                    
        
                </div>
            )
        }
        
        export default body

共有2个答案

司寇瑾瑜

2023-03-14

问题在于用于react组件的命名约定。对于react组件，必须使用pascal case。您的组件应按如下方式进行更正。当您没有配置babel react预设以编译JSX时，也会发生这种情况。

如果您没有使用babel react预设，请将以下CDN放入您的html文件中。您可以在这里找到cdn基本解决方案工作代码笔链接。

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

主要的js

import React from "react"
import ReactDOM from "react-dom"
import Navbar from "./navbar.js"
import Body from "./body.js"

const App = ()=> {
   <Navbar />
   <Body />
}    
ReactDOM.render(<App/>, document.getElementById("root"))

//******************without babel react presets********************
const App = [Body, NavBar];      
ReactDOM.render(App, document.getElementById("app"))

Navbar：

import React from "react"

const NavBar = () => {
   return( 
    <navbar>
        <a href="#">Articles</a>
        <a href="#">Notes</a>
        <a href="#">Course</a>
        <a href="#">Brain</a>
        <a href="#">Newsletter</a>
        <a href="#">Facebook</a>
    </navbar>
   )
}

//************without babel react presets************

const NavBar = React.createElement("nav", null,
    React.createElement("a", { href: "#"}, "Articles"), 
    React.createElement("a", { href: "#"}, "Notes"), 
    React.createElement("a", { href: "#"}, "Course"), 
    React.createElement("a", { href: "#"}, "Brain"), 
    React.createElement("a", { href: "#"}, "Newsletter"),
    React.createElement("a", { href: "#"}, "Facebook")
  );
//*****************************************
export default NavBar;

身体-

import React from "react"
    
const Body = () => {
  return (
       <div>                    
           <h1>Hi, I'm Me</h1>                    
           <p>Lorem Ipsum</p>             
        </div>
     )
 }

//**************without babel react presets************
const Body = React.createElement("div", null, 
      React.createElement("h1", null, "Hi, I'm Me"), 
      React.createElement("p", null, "Lorem Ipsum")
); 
//***************************************************          
 export default Body;

卫增

2023-03-14

浏览器仅支持用于导入的JavaScript模块。

JSX不是JavaScript。

您需要使用Babel将JSX编译为JavaScript。

一般来说，这将导致您拥有一个使用节点的应用程序。js，它（在开发模式下）将运行承载应用程序的HTTP服务器，并在编辑时重新编译它，并且（在构建模式下）将输出静态编译文件供您部署。

遵循React网站上的指导原则，建立用于编译JSX的工具链。（我不推荐第一个选项（使用客户端Babel），因为它有很多限制，例如不支持模块（您已经在使用这些模块））。

或者，使用基于地块的工具链（该工具链比React网站上的任何选项都要轻，但不太常见，因此您在Internet上找到的帮助较少）。

与你眼前的问题无关：

React要求以开头命名组件

类似资料：

ReactJS:“未捕获的语法错误：意外标记

我正在尝试开始在ReactJS中创建一个站点。然而，当我试图将我的JS放在一个单独的文件中时，我开始遇到这样的错误：“uncaughtSyntaxerror:uncontractedtoken” 我尝试添加添加到JS文件的顶部，但它没有修复任何问题。下面是HTML和JS文件。有没有关于出了什么问题的想法？ HTML JS 编辑：我意识到我需要将添加到包含着陆器代码的脚本标记中。然而，在添加这个并重
Typescript：未捕获的语法错误：意外标记

我正在尝试用Typescript和ASP.NET内核设置Angular2。以下是package.json：和tsconfig.json 和SystemJs.Config.js 和app.component.ts：帮我想出解决办法。
未捕获的语法错误：chrome控制台中的意外令牌

我试图发出一个Ajax调用来访问一个web服务并获得响应。但是获取未捕获的语法错误:意外的标记 Request标头如下：请求URL:http://10.10.1.5:8089/axis2/services/cmtlpmservice/getAllMonitors？callback=回调接受：/ 接受-编码：gzip，通货紧缩，sdch 接受-语言：en-US，en； q=0.8 授权：基本YW
Chrome浏览器未捕获的语法错误：令牌意外无效

问题内容： Chrome尝试在页面上加载脚本文件时收到主题错误。它说它在javascript文件的最后一行。我似乎找不到任何问题。firefox中没有错误，脚本可以按预期工作。仅使用表单验证问题答案：该资源末尾有某种伪造的字符。尝试删除最后一行并将其添加回去。我无法弄清楚那里到底是什么… _编辑_我认为这是一个零宽度的空间，Unicode200B。似乎很奇怪，我当然不能肯定这不是Stacko
未捕获的语法错误意外标记U JSON

当我在chrome中运行我的页面时，我得到了这个错误“uncaughtsyntaxerrorunexpectedtokenu”。在firefox中，我得到了“JSON.parse:意外字符”。我从一个php文件返回json数据，返回的json字符串是有效的。我和你核对过了http://jsonlint.com/.任何帮助都将不胜感激。。。谢谢下面是返回的JSON字符串
跨域jquery ajax（Jsonp）：未捕获语法错误：意外令牌：（冒号）

问题内容：我一直在尝试从Steam API中提取数据，但没有运气，因为我总是会遇到上述错误。这是我正在使用的代码：我省略了我的API密钥。我看过许多其他帖子，但无法弄清楚问题出在哪里。我试过使用Jsonp，常规json，也试过使用after ，但无济于事。问题答案：解决方案是添加一个您的jQuery代码将调用的本地代理。您的代理将是服务器端代码（PHP，Python，Ruby等），它将查询

未捕获的语法错误：意外令牌'

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档