Chrome上的纱线：未捕获的语法错误：意外的令牌<答案

【问题标题】：Yarn on Chrome: Uncaught SyntaxError: Unexpected token <Chrome上的纱线：未捕获的语法错误：意外的令牌<
【发布时间】：2018-04-03 15:37:34
【问题描述】：

我在本地机器上有一个工作纱线反应项目。

yarn start

Works，生成一个在本地主机上呈现的网站。

我有一台运行相同项目的服务器。但是，我停止了正在运行的网站，并使用以下命令重新启动：

yarn install 
yarn run build
yarn run prod

通过 chrome（在生产服务器上）访问网站时出现以下错误：

Ucaught SyntaxError: Unexpected token <

我要做的是诊断问题可能出现的位置。总结一下：

1）项目在本地机器（mac osx）上运行yarn start

2）我将项目放在 linux 盒子上，安装、构建和运行，一切似乎都发送到了 chrome；但是，chrome会产生此错误

我不确定问题可能出在哪里。我认为，将其本地化为一组可能的问题会使其易于解决（或提出更好的问题）。

【问题讨论】：

【解决方案1】：

当您为<script> 标签src 的地址获取 HTML 页面时，通常会发生该错误。

在不同的选项卡上打开每个脚本的 URL（或检查开发人员工具的网络选项卡），这些 URL 可能返回 404（或其他一些错误代码）和 HTML 错误页面。

因此，您的代码会尝试将那些 HTML 错误页面解析为 JavaScript 代码，从而产生该错误。

它会得到Uncaught SyntaxError: Unexpected token <，因为它试图将 HTML 内容（例如 <html> ...）解析为 JavaScript 代码。

对于演示，运行下面的 sn-p 并在控制台中查看错误。

<script type=text/javascript src=https://stackoverflow.com></script>
Check the console: "Uncaught SyntaxError: Unexpected token <"

【讨论】：

这可能是由服务器配置引起的吗？（例如，nginx？）
是的，当然。它主要取决于应该是脚本的 HTML 页面返回的内容。有时这只是路径中的拼写错误，或者您忘记上传的文件。
似乎将构建 js 文件误解为样式表。这可能是构建配置问题吗？
可能是。是什么让你这么认为？
好的，我正在查看您提到的文件。下载到浏览器的第一件事是索引。该索引列出了两个构建文件<link href="/build/app-buildid.css" rel="stylesheet"/> 和<script src="/build/app-buildid.js" type="text/javascript"></script>，只有chrome 似乎试图错误地解释.js 文件，当我检查它时用红线标记它。在意外的令牌错误下，我有Resource interpreted as Stylesheet but transferred with MIME type text/html: ".../build/app-buildid.css（这是一个警告）。