Vite 发送内部服务器错误：无法解析 {\"file\":\"translation.html\",\"line\":39,\"column\":1}答案

【问题标题】：Vite sends internal server error: Unable to parse {"file":"translation.html","line":39,"column":1}Vite 发送内部服务器错误：无法解析 {\"file\":\"translation.html\",\"line\":39,\"column\":1}
【发布时间】：2022-08-11 05:22:54
【问题描述】：

我克隆并运行了一个 vite 服务器： https://github.com/fireship-io/webrtc-firebase-demo

我按照说明跑了

npm run dev

我创建了 2 个新的 html 文件并使用标签链接它们我可以毫无问题地访问第一个文件 otherfile.html，但是当单击第二个链接时，我得到了

[vite] Internal server error: Unable to parse {\"file\":\"translation.html\",\"line\":39,\"column\":1}
 at traverseHtml (D:\\WebRTC\\webrtc-firebase-demo\\node_modules\\vite\\dist\\node\\chunks\\dep-e0f09032.js:23067:15)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async devHtmlHook (D:\\WebRTC\\webrtc-firebase-demo\\node_modules\\vite\\dist\\node\\chunks\\dep-e0f09032.js:61779:5)
      at async applyHtmlTransforms (D:\\WebRTC\\webrtc-firebase-demo\\node_modules\\vite\\dist\\node\\chunks\\dep-e0f09032.js:23333:21)
      at async D:\\WebRTC\\webrtc-firebase-demo\\node_modules\\vite\\dist\\node\\chunks\\dep-e0f09032.js:61841:28

文件结构：

webrtc-firebase-demo\\
      |
      |__ index.html
      |__ main.js
      |__ translation.html
      |__ otherfile.html

索引.html：

<!DOCTYPE html>
<html lang=\"en\">
  <head>
    <meta charset=\"UTF-8\" />
    <link rel=\"icon\" type=\"image/svg+xml\" href=\"favicon.svg\" />
    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />
  </head>

  <body>
    <div class=\"videos\">
      <span>
        <video id=\"remoteVideo\" autoplay playsinline></video>
      </span>
    </div>
    <div style=\"width: 90vw; margin: 0 auto\">
      <video id=\"webcamVideo\" autoplay playsinline></video>
      <div style=\"display: grid; grid-template-columns: auto auto;\">
        <button id=\"webcamButton\">Start webcam</button>
        <button id=\"callButton\" disabled>Create Call (offer)</button>
        <button id=\"answerButton\" disabled>Answer</button>
        <button id=\"hangupButton\" disabled>Hangup</button>
      </div>
    </div>
    <a href=\"otherfile.html\">Otherfile</a>
    <a href=\"translation.html\">Translation</a>
    <script type=\"module\" src=\"main.js\"></script>
  </body>
</html>

翻译.html：

<!doctype html>

<head>
    <title>JavaScript Speech to Text</title>
    <script src=\"\\translation.js\"></script>
    <script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js\"></script>
    <style>
    </style>
</head>

<body>
    <p style=\"text-align: center;\">Translation</p>
    <div style=\"margin: 0 0 0 41vw;\">
        <label for=\"inputlanguage\">Select Language</label>
        <select name=\"inputlanguage\" id=\"inputlang\">
            <option value=\"english\">english</option>
            <option value=\"chinese\">chinese</option>
            <option value=\"tamil\">tamil</option>
        </select>
    </div>
    <div style=\"display: flex; align-items: center; margin: 0 0 0 20vw\">
        <textarea style=\"width:50vw; height: 50vh; font-size: 4vh;\" id=\"input\"></textarea>
        <img src=\"img/download.png\" onclick=\"runSpeechRecognition()\" style=\"float: left;\" id=\"action\">
    </div>
    <div style=\"margin: 0 0 0 41vw;\">
        <label for=\"outputlanguage\">Select Language</label>
        <select name=\"outputlanguage\" id=\"outputlang\">
            <option value=\"english\">english</option>
            <option value=\"chinese\">chinese</option>
            <option value=\"tamil\">tamil</option>
        </select>
    </div>
    <div style=\"display: flex; align-items: center; margin: 0 0 0 20vw\">
        <textarea style=\"width:50vw; height: 50vh; font-size: 4vh;\" id=\"output\"></textarea>
        <img src=\"img/download (1).png\" onclick=\"saytext()\" style=\"float: left; margin-left: 10px;\">
    </div>
</body>

</html>

单击链接会导致 500 内部服务器错误

请分享minimal reproducible example 特别是translation.html 文件？
问题明显在translation.html，您没有提供
嗨，我都添加了

标签： javascript vite

【解决方案1】：

上翻译.html, 尝试在 <!doctype html> 之后添加 html 的开始标签，如下所示：

<!doctype html>
<html>
<head>
...

【讨论】：