React/Node Uncaught SyntaxError: Unexpected token <
Posted
技术标签:
【中文标题】React/Node Uncaught SyntaxError: Unexpected token <【英文标题】： 【发布时间】：2019-08-08 21:38:10 【问题描述】：我已经尝试了所有方法，但我有点不知道应该从哪里研究这个问题。
发生的情况是，一旦您构建了 react 应用程序并部署它（使用 node/express），它就会完美运行。但是，如果您再次构建并将构建文件夹带到节点服务器，则会出现语法错误。仅当您的浏览器已打开该应用一次时才会发生这种情况。
我进行了研究，人们说浏览器正在尝试加载较旧的静态文件，这就是发生这种情况的原因。尽管我尝试过，但他们的解决方案都没有奏效。
非常感谢任何人对此问题的帮助。
干杯
更新
正如戴文建议的那样。我查看了 chrome devtools，这是我在回复中得到的结果
<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<script src="/js/modernizr.js"></script>
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/mega-nav.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.1/css/swiper.min.css">
<title>Q Parts</title>
<link href="/static/css/style.css" rel="stylesheet">
<link href="/static/css/main.css" rel="stylesheet">
<link href="/static/css/main-ar.css" rel="stylesheet">
</head>
<body><noscript>You need to enable javascript to run this app.</noscript>
<div id="root"></div>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.1.min.js"></script>
<script src="/js/jquery.mobile.custom.min.js"></script>
<script src="/js/popper.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/main.js"></script>
<script>$(document).ready(function () $(".has-children").hover(function () $(".overlay-lg").addClass("is-visible") , function () $(".overlay-lg").removeClass("is-visible") ), $(".cd-primary-nav li").click(function () $(".cd-primary-nav").animate( scrollTop: $(".nav-is-visible").offset().top , "200") ) )</script>
<script type="text/javascript" src="/static/js/main.957b5c6e.js"></script>
</body>
</html>
【问题讨论】：
通常当这种情况发生时，这意味着您的服务器正试图通过发送 index.html 页面来响应对非 html 资产（css、js 文件等）的请求。您的服务器是否将所有请求重定向到 index.html？ 感谢您的回复，我将根据任何请求发送 html 文件。我也有我的 api 方法供客户请求它们。常量 buildPath = '公共/构建'; app.use(路线); app.get('*', (req, res) => res.sendFile($__dirname/$buildPath/index.html, err => if (err) res.status(500).send(err) ) );
【参考方案1】：
在我的情况下，在 index.html 中使用 base href 的方法没有帮助。 我的项目有单独的 Web 和服务器存储库。
问题出现在快速配置中的错误路径，我已经进行了这些更改并且应用程序启动正常：
app.use(express.static(path.join(__dirname, '../../../../web/build'))); // the same directory as below
app.get('*', (req, res) =>
res.sendFile(path.join(__dirname, '../../../../web/build/index.html'));
);
【讨论】：
【参考方案2】：谢谢大家帮助我解决这个问题。我接受了@Davin 的建议并打开了开发工具（在 chrome 中）。我用谷歌搜索了同样的问题，但添加了_sw-precache。最终，我发现人们面临着同样的问题，所以这是他们的建议：
只需将<base href="/" /> 添加到我的 index.html 中即可为我修复它。
https://github.com/webpack/webpack/issues/2882#issuecomment-280906981
【讨论】：
那个人救了我的命！【参考方案3】：我发现有两件事可能是问题所在。一，我从你的评论中看到处理响应的代码是res.sendFile($__dirname/$buildPath/index.html我认为你想要的实际上是
res.sendFile(`$__dirname/$buildPath/index.html` // Note the backticks
如果不是这样，我认为您正在为相同的 HTML 文件提供对 .js、.css 等文件的请求。您是否使用某种类型的静态文件中间件？如果您使用它，它将提供一个实际文件（如果它存在于服务器上），并为您的 index.html 文件提供其他所有文件。
要检查，您可以打开 chrome 开发人员工具并查看对您的 javascript 文件（main.js 或任何您命名的文件）的请求。它是正确的 javascript，还是 index.html 中的 HTML？如果是HTML，你需要看这个，假设你使用的是快递服务器：https://expressjs.com/en/starter/static-files.html
【讨论】：
感谢您的回复。反引号应该在那里，我不确定为什么没有显示。我找到了解决我的问题的方法。我会发布我的答案。再次感谢您【参考方案4】：这个错误几乎总是意味着某些代码正在尝试JSON.parse 某个 HTML 文档。
根据您提供的信息很难知道发生了什么。
我建议查看 chrome devtools 网络选项卡，看看是什么对服务器的调用产生了错误。看响应，应该是js的时候应该是html。
【讨论】：
感谢您的建议。我会更新我的问题，告诉你我得到了什么以上是关于React/Node Uncaught SyntaxError: Unexpected token <的主要内容，如果未能解决你的问题，请参考以下文章
text #react #boilerplate #express #react #node #mongodb
codeSandBox (React/Node) 的 Http 请求错误
AWS：EACCES：权限被拒绝，mkdir '/home/react-app/node_modules/node-sass/vendor'