Question

我已经尝试了一切，但是对于应该在哪里研究这个问题，我有些迷茫。

发生的事情是，一旦构建了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>

Answer 1

此错误几乎总是表示某些代码试图JSON.parse是HTML文档。

根据您提供的信息很难知道正在发生什么。

我建议您查看chrome devtools的“网络”标签，并查看对服务器的调用是否会产生错误。查看响应，当期望使用js时可能是HTML。

Answer 2

就我而言，在 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'));
});

Answer 3

我认为有两件事可能是问题所在。第一，我从您的评论中看到，用于处理响应的代码是let newBananas = this.state.bananas newBananas[index] = value this.setState({bananas: newBananas })，我想您实际上想要的是

res.sendFile(${__dirname}/${buildPath}/index.html

如果不是那样，我认为您正在为请求.js，.css等文件提供相同的HTML文件。您是否正在使用某种类型的静态文件中间件？如果使用该文件，它将在服务器上存在时提供实际文件，并为其他所有内容提供index.html文件。

要进行检查，您可以打开chrome开发人员工具，然后查看对javascript文件（main.js或命名的文件）的请求。是正确的javascript，还是index.html中的HTML？如果是HTML，则假设您正在使用Express Server：https://expressjs.com/en/starter/static-files.html

Answer 4

谢谢大家，帮助我解决了这个问题。我接受了@Davin的建议，并打开了开发工具（chrome）。我搜索了相同的问题，但添加了_sw-precache。最终，我发现人们面临着同样的问题，所以这是他们的建议：

只需将<base href="/" />添加到我的index.html中即可为我修复。

https://github.com/webpack/webpack/issues/2882#issuecomment-280906981

React / Node Uncaught SyntaxError：意外令牌<

4 个答案: