React学习--js文件运行不了--Uncaught SyntaxError SyntaxError: Unexpected token ‘＜‘问题解决

最新推荐文章于 2024-05-31 00:05:02 发布
原创 最新推荐文章于 2024-05-31 00:05:02 发布 · 2.5k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #react.js #学习

本文介绍了一种常见的JavaScript文件运行时出现的Uncaught SyntaxError问题及其解决方案。通过调整终端工作目录至npm描述文件所在位置，成功解决了运行问题。

当打开js文件按运行，显示的是Uncaught SyntaxError SyntaxError: Unexpected token '<'如下图这个问题而运行不了时

首先我们可以尝试直接用bash(终端)直接执行npm run start 来运行

 如上图，出现了报错。我们检查一下目录

 我们可以发现npm描述文件是my-app,这里有个注意点--终端工作目录和npm描述文件平级。

所以，我们在终端输入cd my-app,将终端工作目录定位到npm描述文件

 

定位成功后，我们再输入npm run start

 这样就成功啦~

【taro react 错误解决】---- Uncaught SyntaxError: Unexpected token ‘＜‘
止于至善
09-23 1772
1. 报错提示 Uncaught SyntaxError: Unexpected token '<' 2. 报错截图 3. 查看报错原因 4. 分析原因 这里肯定不可能是错误的，依次向下查找； head 标签里边的 meta title script 等都是常规，没有多余的 ‘<’，没有报错； body 标签中 script 的 app.js 的静态资源文件路径错误！ 5. 造成问题的原因 app.js 是脚手架自动引入，也就是说不是代码的问题，而是配置问题； 查看 conf
React Uncaught SyntaxError: Unexpected token ‘＜‘ 报错
刻痕
02-24 2341
线上项目： 本地正常，线上有问题。重新打包，发版，完事。 如果index.html 有js，则： <script type="text/babel" src="%PUBLIC_URL%/jweixin-1.6.0.js"></script> 尽量配置 - 前端不缓存配置 index.html / head 内添加： <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"
React使用serve -s启动服务失败，提示SyntaxError: Unexpected token ‘.‘ 问题解决
lnluozi的博客
05-31 942
在React项目中，使用npm run build命令编译后，尝试通过serve -s build启动服务。
react项目报错Uncaught SyntaxError: Unexpected token ‘＜‘
u010234868的专栏
08-02 3090
2. 项目嵌入微服务是否配置路径不对。1. 前端包没有覆盖更新；
【React】:Uncaught SyntaxError: Unexpected token ‘＜‘ 这种错误怎么解决？？？
weixin_53126517的博客
03-18 4370
错误示例如上图， 这个错误的前提应该是没有使用React脚手架，React框架由那么为什么会出现如图错误呢，原因是<script>标签内需要添加type="text/babel" 错误示例： <script> class Todolist extends React.Component { constructor(props) { super(props); this.state = { .
vite项目 Uncaught Syntaxerror: Unexpected token ＞ vue项目上线白屏
weixin_43239880的博客
04-07 7834
vite项目 Uncaught Syntaxerror: Unexpected token > vue项目上线白屏
Uncaught SyntaxError: Inline Babel script: Unexpected token
游海东的技术专栏
05-10 4236
1、错误描述 2、错误原因 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/react.development.js" &g...
react
weixin_41069726的博客
06-07 227
基础库 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">&l...
Uncaught SyntaxError: Unexpected token ‘＜‘ vue react
fred8的博客
04-25 1123
Uncaught SyntaxError: Unexpected token '<'Uncaught SyntaxError: Unexpected token '<'报错 vue react控制台显示错误解决方法1解决方法2（文件未引入路径） Uncaught SyntaxError: Unexpected token '<'报错 vue react 最近在写vue react 的项目过程中有报Uncaught SyntaxError: Unexpected token ‘&
解决：react项目部署到服务器，刷新报“Uncaught SyntaxError: Unexpected token ＜“ 错误
qq_41355222的博客
10-20 3330
因为使用npm run build生成的build目录。原因就是生成的index.html引用的js文件路径不对。 <script src="./static/js/main.2a806527.chunk.js"></script> 多出来一个’.’，此时突然想起来，刚开始使用react的时候在package.json添加了一行代码"homepage": “.”。 修改为网站的网址"homepage": “http://110.42.213.191:3001/”，问题解决。 ..
JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
11-24
本文实例讲述了JS提示：Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法。分享给大家供大家参考，具体如下： Uncaught SyntaxError: Unexpected token ILLEGAL 未捕获的语法错误： 意想不到的非法令牌 如下图所示： 复制代码 代码如下:<input id=”btn_0_4EAE4F474C91156086C0D4EA7E983C69C215B649″ type=”button” value=”连接” onclick=”middleware_connect(0, 4EAE4F474C911560
React报错Uncaught SyntaxError: Unexpected token ＜
weixin_43654123的博客
01-26 2600
解决方法:把javascript改为babel 喜欢技术的，一起进群交流学习吧！！！
react Tinymce富文本使用报错Uncaught SyntaxError: Unexpected token ‘＜‘
weixin_55014951的博客
04-02 4239
这个问题其实很简单就解决了,但我走了不少弯路,希望看到文章的兄弟们不要再踩坑了 首先,出现这个问题,应该是在把Tinymce本地化 其实这个东西本地化特别简单,网上有些过时的内容,写了一大堆,把我坑惨了 下载文件都一样的,不再多说 从引入文件开始 解压之后把文件里的那个tinymce文件放public 然后在index.html加入 <script src="%PUBLIC_URL%/tinymce/tinymce.min.js"></script>
React报错Uncaught SyntaxError: Unexpected token ‘＜‘
liulang68的博客
11-12 2846
导致无法编译react的语法
React Uncaught SyntaxError: Unexpected token ‘＜‘
weixin_44240581的博客
01-25 2050
问题描述 项目运行，控制台出现错误Uncaught SyntaxError: Unexpected token '<'，但是项目运行正常 解决方法 经过排查，发现是入口的html文件中引入了两个空的js文件 把空的js文件注释或删除就行了 ...
js Uncaught SyntaxError: Unexpected token <
dangsh_的博客
02-03 6826
js 报错 Uncaught SyntaxError: Unexpected token <报这个错的原因有可能是 引入了一个不存在的js文件，即没有main.js这个文件， 但是你却在代码中<script type="text/javascript" src="../static/js/main.js"></script>这样就会报这样的错。还有一种解决方案是将text/javascript 改
react Uncaught SyntaxError: Unexpected token ‘＜‘报错
PrimaryColor
04-15 3403
需要在script标签上面，增加type="text/babel"： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </h.
react 刷新Uncaught SyntaxError: Unexpected token ‘＜‘
周家大小姐
04-29 3786
react 刷新Uncaught SyntaxError: Unexpected token '<' 在二级路由下跳转,页面一刷新就白屏f12下会报令牌错误 处理方法: 找到public/index.html页面 在脚本上src前加上"/"<scriptsrc="index.js"></script> 再次刷新页面成功渲染 ...
在vite中使用react-router-dom-v6 路由报错 Uncaught SyntaxError: Unexpected token ‘＜‘
marsAphrodite的博客
05-30 2828
如果 在vite中使用react-router-dom v6，并且抽离出路由，结果报错 Uncaught SyntaxError: Unexpected token ‘＜‘ 情况。如下图所示： 在图片中，我将路由模块化，并通过useRoutes进行渲染。 之后在src/App.jsx进行使用时，会爆以下信息： 接下来，我就四处寻找资料，有的都是什么路径错误。此时报错代码如下： import { Route, Routes, NavLink, useRoutes, } from "reac
move-top.js:1 Uncaught SyntaxError: Unexpected token '<'
最新发布
06-19
### 解决方案分析 `Uncaught SyntaxError: Unexpected token '<'` 错误通常表明 JavaScript 文件的内容被浏览器错误地解析为 HTML 内容。这可能是由于以下原因之一导致的： 1. **文件路径错误**：JavaScript 文件未正确加载，返回的是 404 错误页面或其他非 JavaScript 内容。 2. **MIME 类型错误**：服务器配置错误，导致 JavaScript 文件被以 `text/html` 而不是 `application/javascript` 的 MIME 类型返回[^1]。 3. **静态资源路径配置问题**：在项目中，静态资源路径配置不正确，导致 JavaScript 文件无法正确加载[^3]。 4. **脚本标签中的路径错误**：HTML 文件中引用 JavaScript 文件的路径可能有误[^3]。 以下是具体的解决方案： ### 解决方案步骤 #### 1. 检查文件路径 确保 `move-top.js` 文件的路径是正确的，并且能够在浏览器中直接访问。例如，在浏览器地址栏输入 `http://your-domain/path/to/move-top.js`，确认是否能正常加载该文件。如果返回的是 HTML 页面（通常是 404 页面），则需要修正文件路径[^3]。 #### 2. 验证服务器 MIME 类型配置 检查服务器是否正确配置了 JavaScript 文件的 MIME 类型。如果服务器将 `.js` 文件以 `text/html` 格式返回，则需要调整服务器配置，确保 `.js` 文件以 `application/javascript` 返回。 对于 Apache 服务器，可以在 `.htaccess` 文件中添加以下内容： ```apache AddType application/javascript .js ``` 对于 Nginx 服务器，可以在配置文件中添加以下内容： ```nginx types { application/javascript js; } ``` #### 3. 检查静态资源路径配置 如果是使用前端框架（如 Vue、React 等）开发的项目，静态资源路径配置可能存在问题。例如，在 Vue 项目中，`publicPath` 配置错误可能导致静态资源无法正确加载[^3]。 - 如果项目部署在根路径下，确保 `publicPath` 设置为 `'/'`。 - 如果项目部署在子路径下，确保 `publicPath` 设置为对应的子路径，例如 `'/subpath/'`。 示例配置（Vue 项目中的 `vue.config.js`）： ```javascript module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/subpath/' : '/' }; ``` #### 4. 检查 HTML 文件中的 `<script>` 标签 确保 HTML 文件中引用 `move-top.js` 的 `<script>` 标签路径正确。例如： ```html <script src="/path/to/move-top.js"></script> ``` 如果路径错误或文件不存在，浏览器可能会加载一个 HTML 错误页面，从而导致 `Unexpected token '<'` 错误。 #### 5. 检查代码语法 虽然此错误通常与文件加载相关，但仍需确保 `move-top.js` 文件中没有语法错误。例如，某些旧版浏览器可能不支持现代 JavaScript 特性（如可选链操作符 `?.`），这也会导致类似错误[^2]。 ### 示例代码验证 假设 `move-top.js` 文件内容如下： ```javascript function moveToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } document.getElementById('move-top-btn').addEventListener('click', moveToTop); ``` 确保代码语法正确，并且浏览器支持所有使用的特性。 --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值