如何调试：意外令牌 '<' : <html lang="en">答案

【问题标题】：How to debug: Unexpected token '<' : <html lang="en">如何调试：意外令牌 '<' : <html lang="en">
【发布时间】：2020-02-13 10:18:32
【问题描述】：

过去几天将我们的 react-app 部署到 firebase 向我们展示了一些意外错误。我们在 index.html 文件中有一个脚本抛出了这个错误。

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>THE RISE COLLECTION | Software Development</title>
    <meta charset="utf-8">
    <meta name="author" content="jiosh_">
    <meta name="description" content="THE RISE COLLECTION | Innovating Without Forgetting To Be Creative">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="shortcut icon" href="assets/images/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
    <link href="/static/css/main.05c6e305.css" rel="stylesheet">
  </head>
  <body class="landing-page" data-spy="scroll" data-target=".navbar" data-offset="75">
    <div class="loader-wrapper"><div class="loader">
    </div>
  </div>
  <div id="root">
  </div>
  <script src="assets/js/jquery-3.3.1.min.js">
  </script>
  <script src="assets/js/bootstrap.min.js">
  </script>
  <script src="assets/js/land-scripts.js">
  </script>
  <div id="color">
  </div>
  <script src="assets/js/script.js">
  </script>
  <script src="assets/js/scroll.js">
  </script>
  <script type="text/javascript" src="/static/js/main.5533582a.js">
  </script>
  </body>
  </html>

脚本在 google chrome 控制台中显示的内容：

<html lang="en"> <- error coming from this line
  <head>
    <title>THE RISE COLLECTION | Software Development</title>
    <meta charset="utf-8">
    <meta name="author" content="jiosh_">
    <meta name="description" content="THE RISE COLLECTION | Innovating Without Forgetting To Be Creative">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="shortcut icon" href="assets/images/favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
    <link href="/static/css/main.05c6e305.css" rel="stylesheet">
  </head>
  <body class="landing-page" data-spy="scroll" data-target=".navbar" data-offset="75">
    <div class="loader-wrapper"><div class="loader">
    </div>
  </div>
  <div id="root">
  </div>
  <script src="assets/js/jquery-3.3.1.min.js">
  </script>
  <script src="assets/js/bootstrap.min.js">
  </script>
  <script src="assets/js/land-scripts.js">
  </script>
  <div id="color">
  </div>
  <script src="assets/js/script.js">
  </script>
  <script src="assets/js/scroll.js">
  </script>
  <script type="text/javascript" src="/static/js/main.5533582a.js">
  </script>
  </body>
  </html>

我已经解决了很多问题，但还没有找到可行的解决方案。这个项目是一个 react-app。

注意我尝试删除/读取“text/javascript”，同时将 src 标签更改为文件名。

【问题讨论】：

这听起来像是一个 HTML 页面（可能是一个自定义错误页面）被返回到可能需要 JSON 的东西。您是否检查过浏览器开发者工具中的网络标签？
@TiesonT。 gyazo.com/fd37e6564d53cc103de4915938f70ad3 这是专门选择该文件的网络选项卡的屏幕截图。文件的内容类型，即使它设置为“text/javascript”项目端..在生产构建内容类型上是 text/hmtl

标签： jquery html reactjs

【解决方案1】：

你的文件类型是js，以.js结尾您需要在某个地方输出 .html 文件，即使它所做的只是加载 .js 文件。

在 firebase i thin 你可以添加一个配置文件来声明重定向，即我是一个单页应用程序，总是提供 index.html

-_- 运气好

【讨论】：

几秒钟前才发现...类型已更改为“text/html”，firebase 配置中的公共参数更改为 build，该项目现已上线。

【解决方案2】：

类型改为“text/html”

firebase 配置设置“public”已更改为正确构建为 react-app 项目提供服务

【讨论】：