vite
vite copied to clipboard
Published
20 hours ago •
vitejs
vitejs
Support for optional (closing) tags
trafficstars
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
- [X] Follow our Code of Conduct
- [X] Read the Contributing Guidelines.
- [X] Read the docs.
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
- [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- [X] The provided reproduction is a minimal reproducible example of the bug.
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:
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]()
This sounds similar to https://github.com/vitejs/vite/issues/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.
