Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Support for optional (closing) tags #5603

Closed
7 tasks done
nikeee opened this issue Nov 10, 2021 · 3 comments · Fixed by #9678
Closed
7 tasks done

Support for optional (closing) tags #5603

nikeee opened this issue Nov 10, 2021 · 3 comments · Fixed by #9678
Labels
bug: upstream Bug in a dependency of Vite feat: html p3-minor-bug An edge case that only affects very specific usage (priority)

Comments

@nikeee
Copy link

nikeee commented Nov 10, 2021 •
edited

Describe the bug

Some tags are optional in HTML. For example, <head>, <body> and <html>. The closing tag of <html> can be omitted. A body is started implicitly when the first non-<head>-element is created.

This seems to cause issues with vite's parser.

Reproduction

This HTML template:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Hi</title>
<div>Hi</div>
<script type="module" src="/src/main.ts"></script>

Causes a parsing error, probably due to the missing </html>:

[vite:build-html] Unable to parse {"file":"/<path/>index.html","line":2,"column":1}
1  |  <!DOCTYPE html>
   |                  ^
2  |  <html lang="en">
3  |  <meta charset="utf-8">

Adding </html> fixes this:

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Hi</title>
<div>Hi</div>
<script type="module" src="/src/main.ts"></script>
</html>

But then, the script and styles are positioned before <!doctype html>:

<script type="module" crossorigin src="/assets/index.ad4f7fa4.js"></script>
<link rel="stylesheet" href="/assets/index.06d14ce2.css">
<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Hi</title>
<div>Hi</div>

</html>

Adding a <head> and <body> also fixes this.

System Info

System:
    OS: Linux 4.4 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 21.49 GB / 31.95 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/bin/node
    Yarn: 1.22.11 - ~/.npm-bin/bin/yarn
    npm: 7.24.1 - ~/.npm-bin/bin/npm
  npmPackages:
    vite: ^2.6.4 => 2.6.14

Used Package Manager

npm

Logs

vite v2.6.14 building for production...
✓ 0 modules transformed.
[vite:build-html] Unable to parse {"file":"<path>/vite-project/index.html","line":2,"column":1}
1  |  <!DOCTYPE html>
   |                  ^
2  |  <html lang="en">
3  |  <meta charset="utf-8">
file: <path>/vite-project/index.html
error during build:
Error: Unable to parse {"file":"<path>/vite-project/index.html","line":2,"column":1}
1  |  <!DOCTYPE html>
   |                  ^
2  |  <html lang="en">
3  |  <meta charset="utf-8">
    at traverseHtml (<path>/vite-project/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:21240:15)
    at async Object.transform (<path>/vite-project/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:21305:17)
    at async ModuleLoader.addModuleSource (<path>/vite-project/node_modules/rollup/dist/shared/rollup.js:22148:30)
    at async ModuleLoader.fetchModule (<path>/vite-project/node_modules/rollup/dist/shared/rollup.js:22201:9)
    at async Promise.all (index 0)

Validations
@sanyuan0704
Copy link
Contributor

Is this @vue/compiler-dom's bug? @sodatea

@meduzen
Copy link
Contributor

meduzen commented Feb 6, 2022 •
edited

Same issue on my side on Vite 2.7.13 where it fails on an <option> without closing tag.

HTML excerpt:

    <datalist id="the-fillable-datalist">
        <option value="yolo">
        <option value="pineapple">
        <option value="apple">
        <option value="lupin">
    </datalist>

Error thrown on vite build --mode=production:

[vite:build-html] Unable to parse HTML; 24
 at {"file":"/Users/m/Code/dcmlab-scores-analysis/src/components.html","line":501,"column":9}
499|          <option value="pineapple">
500|          <option value="apple">
501|          <option value="lupin">
   |          ^
502|      </datalist>
503|  
    at handleParseError (/Users/m/Code/dcmlab-scores-analysis/node_modules/vite/dist/node/chunks/dep-f5552faa.js:21459:11)
    at traverseHtml (/Users/m/Code/dcmlab-scores-analysis/node_modules/vite/dist/node/chunks/dep-f5552faa.js:21415:9)
    at async Object.transform (/Users/m/Code/dcmlab-scores-analysis/node_modules/vite/dist/node/chunks/dep-f5552faa.js:21492:17)
    at async transform (/Users/m/Code/dcmlab-scores-analysis/node_modules/rollup/dist/shared/rollup.js:21995:16)
    at async ModuleLoader.addModuleSource (/Users/m/Code/dcmlab-scores-analysis/node_modules/rollup/dist/shared/rollup.js:22215:30)
[!] Error: unfinished hook action(s) on exit:
(vite:load-fallback) load "/Users/username/Code/project-folder/index.html"

No big deal, because I only have to update the HTML, but it’s a bit counterproductive, and not nice in the editor:
image

In dev mode (vite --mode=development), the stack trace is slightly different.

Unable to parse HTML; Element is missing end tag.
 at {"file":"/components.html","line":501,"column":9}
499|          <option value="pineapple">
500|          <option value="apple">
501|          <option value="lupin">
   |          ^
502|      </datalist>
503|

 at {"file":"/components.html","line":501,"column":9}
    at handleParseError ([/Users/m/Code/dcmlab-scores-analysis/node_modules/vite/dist/node/chunks/dep-f5552faa.js:21459:11]())
    at traverseHtml ([/Users/m/Code/dcmlab-scores-analysis/node_modules/vite/dist/node/chunks/dep-f5552faa.js:21415:9]())
    at processTicksAndRejections (internal[/process/task_queues.js:95:5]())
    at async devHtmlHook ([/Users/m/Code/dcmlab-scores-analysis/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52271:5]())
    at async applyHtmlTransforms ([/Users/m/Code/dcmlab-scores-analysis/node_modules/vite/dist/node/chunks/dep-f5552faa.js:21749:21]())
    at async viteIndexHtmlMiddleware ([/Users/m/Code/dcmlab-scores-analysis/node_modules/vite/dist/node/chunks/dep-f5552faa.js:52341:28]()

@bluwy
Copy link
Member

bluwy commented Mar 29, 2022

This sounds similar to #5966 which is requesting for a more lenient HTML parser. Currently we're using Vue's parser for HTML but we may have to explore other parsers to achieve this.

@bluwy bluwy added the bug: upstream Bug in a dependency of Vite label Mar 29, 2022
kachick added a commit to mobu-of-the-world/emobu that referenced this issue May 19, 2022
@kachick
🙌 I don't know nothing about front-end vitejs/vite#5603
bfbd41a
@patak-dev patak-dev added the p3-minor-bug An edge case that only affects very specific usage (priority) label Jul 29, 2022
@patak-dev patak-dev mentioned this issue Aug 15, 2022
Merged
11 tasks
@github-actions github-actions bot locked and limited conversation to collaborators Sep 8, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug: upstream Bug in a dependency of Vite feat: html p3-minor-bug An edge case that only affects very specific usage (priority)
Projects
Team Board
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

refactor: migrate from vue/compiler-dom to parse5 vitejs/vite
6 participants
@patak-dev @sodatea @nikeee @meduzen @bluwy @sanyuan0704