Preloading broken due to unreferenced fonts in Vite manifest

[benmccann]

Describe the bug

You can visit https://kit.svelte.dev/, which is supposed to render something like:

<link rel="preload" as="font" type="font/woff2" href="./_app/immutable/assets/overpass-latin-300.3782c01a.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="./_app/immutable/assets/overpass-latin-600.0ca25556.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="./_app/immutable/assets/fira-mono-latin-400.8d4e0c52.woff2" crossorigin>

You can see in the network tab that these are referenced from a CSS file in our project:

And you can open up that file to see the references:

But these files are orphaned in the Vite manifest and so SvelteKit doesn't know which pages it needs to preload them for.

Here's the import chain:

• https://github.com/sveltejs/kit/blob/7607f8b16b17edd5e6188f4066f28c886bfb8881/sites/kit.svelte.dev/src/routes/%2Blayout.svelte#L7
• https://github.com/sveltejs/site-kit/blob/8e9e663ed67a572a838a476cb6bc10ae1f2bf8e4/packages/site-kit/src/lib/styles/index.css#L2C1
• https://github.com/sveltejs/site-kit/blob/8e9e663ed67a572a838a476cb6bc10ae1f2bf8e4/packages/site-kit/src/lib/styles/fonts.css#L24

#11943 looks a bit similar, but was talking about workers, so I wasn't exactly sure if it was the same

Reproduction

https://github.com/sveltejs/kit/tree/master/sites/kit.svelte.dev

Steps to reproduce

git clone git@github.com:sveltejs/kit.git

Edit packages/kit/src/exports/vite/index.js to comment out these two lines:

					fs.unlinkSync(`${out}/client/${vite_config.build.manifest}`);
					fs.unlinkSync(`${out}/server/${vite_config.build.manifest}`);

Now run:

cd sites/kit.svelte.dev
pnpm install
pnpm build

Open .svelte-kit/output/client/vite-manifest.json. See that the .woff2 files have no references to them.

System Info

npmPackages:
    vite: ^4.4.9 => 4.4.9

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• 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 vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sun0day]

can't reproduce it , it works in my macos

[benmccann]

Thanks so much for taking a look @sun0day! That's what I see as well. Unfortunately it's not the expected behavior. The font files are in the manifest, but the manifest is not saying which files use those fonts. We need to know which pages use the fonts so that we know which pages need to preload them, but that information for some reason is missing.

I would expect the output to look something more like this:

  "_ThemeToggle.svelte_svelte_type_style_lang.0406e17e.js": {
    "assets": [
      "_app/immutable/assets/overpass-latin-300.3782c01a.woff2",
      "_app/immutable/assets/overpass-latin-600.0ca25556.woff2",
      "_app/immutable/assets/fira-mono-latin-400.8d4e0c52.woff2",
      "_app/immutable/assets/link.1a918426.svg"
    ],
    "css": [
      "_app/immutable/assets/ThemeToggle.ebee0a7d.css",
      "_app/immutable/assets/Icon.c25fd2f4.css"
    ],
    "file": "_app/immutable/chunks/ThemeToggle.svelte_svelte_type_style_lang.0406e17e.js",
    "imports": [
      "_scheduler.da650eeb.js",
      "_index.2e4dbd2f.js"
    ]
  },

[sun0day]

Ah I see