Duplicate script tags inserted

[benmccann]

Describe the bug

I'm noticing duplicate script tags in my SvelteKit app.

		<link rel="modulepreload" href="/./_app/pages/$layout.svelte-a6ce5e1a.js">
...
	<link rel="modulepreload" as="script" crossorigin="" href="/_app/pages/$layout.svelte-a6ce5e1a.js">

To Reproduce

• npm init svelte@next and choose all the defaults
• npm run preview

Inspect head element with Chrome inspector

Diagnostics

• The output of npx envinfo --system --npmPackages svelte,@sveltejs/kit,vite --binaries --browsers

  System:
    OS: Linux 5.8 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-10510U CPU @ 1.80GHz
    Memory: 11.30 GB / 31.14 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.16.0/bin/yarn
    npm: 7.11.1 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 90.0.4430.93
    Firefox: 88.0
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.94 
    svelte: 3.37.0 => 3.37.0 
    vite: ^2.1.0 => 2.2.3

• Your browser: Chrome

• Your adapter (e.g. Node, static, Vercel, Begin, etc...): Node

Severity
Well I didn't notice it for awhile, so I guess it's not the worst, but it seems like there'd be some performance impact at the very least

[Yahatix]

I've done some digging and it seems to originate in vite see here
I'm not sure if this is something that can be changed by sk but i would assume that it would need to be changed in vite

[benmccann]

I would guess this is related to hydration. I don't see it if I view source, but only when inspecting the document with Chrome inspector. @hbirler maybe this would be an interesting test case for you if you're still interested in working on hydration?

[hbirler]

I am not sure this is directly about hydration, since I do not see a hydration function being called with the HEAD node. And in my browser (firefox) the duplicates look like this:

<link rel="modulepreload" href="/./_app/pages/__layout.svelte-fd0963f2.js">
...
<link rel="preload" as="script" crossorigin="" href="/_app/pages/__layout.svelte-fd0963f2.js">

So module preload also becomes preload. I don't know why that would happen.

[benmccann]

I see the following in build/app/start-4aff77ac.js, so I guess @Yahatix was right:

const __vitePreload = function preload(baseModule, deps) {
  if (!deps || deps.length === 0) {
    return baseModule();
  }
  if (scriptRel === void 0) {
    const relList = document.createElement("link").relList;
    scriptRel = relList && relList.supports && relList.supports("modulepreload") ? "modulepreload" : "preload";
  }
  return Promise.all(deps.map((dep) => {
    dep = `${base}${dep}`;
    if (dep in seen)
      return;
    seen[dep] = true;
    const isCss = dep.endsWith(".css");
    const cssSelector = isCss ? '[rel="stylesheet"]' : "";
    if (document.querySelector(`link[href="${dep}"]${cssSelector}`)) {
      return;
    }
    const link = document.createElement("link");
    link.rel = isCss ? "stylesheet" : scriptRel;
    if (!isCss) {
      link.as = "script";
      link.crossOrigin = "";
    }
    link.href = dep;
    document.head.appendChild(link);
    if (isCss) {
      return new Promise((res, rej) => {
        link.addEventListener("load", res);
        link.addEventListener("error", rej);
      });
    }
  })).then(() => baseModule());
};

[benmccann]

I filed an issue in the Vite tracker for this here: vitejs/vite#4444