Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

inject <script type="module"> into <head> instead of <body>

See original GitHub issue

Is your feature request related to a problem? Please describe. vite buildHtmlPlugin injects <script type="module"> tags at the end of <body>

This has 2 potential issues with generic SSR (eg. headless chrome with puppeteer crawling a regular vite build)

  1. If the initial html is large, it may take longer for the browser to start downloading the scripts.
  2. If you run code that completely replaces the content of body, SSR result will no longer contain the scripts

Describe the solution you’d like Inject module scripts in <head> they are only executed after parse per spec: https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer

Describe alternatives you’ve considered rewrite index.html after vite is done, before SSR

Additional context Ran into this when i tried to build a simple export feature in svite, where the svelte app is mounted to document.body by default. Not an issue when you don’t use sveltes hydratable compiler option. But when you do, 2) above happens

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

3reactions
sodateacommented, Oct 10, 2020

@underfin According to the spec link in the issue, <script type="module">s are deferred by default.

According to the resource hints spec (https://github.com/w3c/resource-hints/issues/13, https://www.w3.org/TR/preload/#early-fetch-and-application-defined-execution), if I understand correctly, <link rel="preload" as="script"> or <link rel="modulepreload"> work essentially the same as <script defer>.

0reactions
isaaclcommented, Nov 10, 2020

See comment in #882

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack Dynamic Import inject into <body> instead of <head>
I have a project where I use turbolinks in conjunction with Webpack's dynamic imports. What I have is that the initial javascript file...
Read more >
Where to put a script tag — into head or body end? - Medium
There are two types of scripts — classic not modules and modules. You saw in head.html that a browser suspends HTML parsing when...
Read more >
JavaScript modules - MDN Web Docs
This guide gives you all you need to get started with JavaScript module syntax.
Read more >
Ways to include a JavaScript file in another JavaScript file
The <script> tag can be injected into either the web page <head> , or inserted just before the closing </body> tag. Here is...
Read more >
ASP.NET Core Blazor JavaScript interoperability (JS interop)
To define a JS initializer, add a JS module to the project named ... Load a script in <head> markup (Not generally recommended) ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

DevTools very slow when importing @tailwindcss/ui

Next page

[vite] error while transforming /app/client/vite.config.ts with esbuild in Docker image