Incorrect Paths for Font Assets in Vite 5 Build Output

[vnphanquang]

Describe the bug

Paths for font assets are incorrect in build output. For example:

In vite 4: /_app/immutable/assets/font.woff2 (correct)
In vite 5: /_app/immutable/assets/nodes/font.woff2 (incorrect)

Note the added nodes directory. The actual font file still lives at /_app/immutable/assets/ and not in nodes. This nested nodes folder seems to be new in vite 5, it now hosts all the built css.

Reproduction

Please clone this repo https://github.com/vnphanquang/svelte-4-vite-5 (bootstrapped with npm create svelte@latest) and follow the steps below

1. Install dependencies pnpm install
2. Build pnpm build
3. Preview pnpm preview
4. Go to /about page
5. Verify in network tab, fonts files are 404 (there should also be console logs)

Logs

Below is server log on navigation to /about

Error: Not found: /_app/immutable/assets/nodes/fira-mono-latin-400-normal.yoy1YEIp.woff2
    at resolve (file:///[...truncated...]/.svelte-kit/output/server/index.js:3477:18)
    at resolve (file:///[...truncated...]/.svelte-kit/output/server/index.js:3304:34)
    at #options.hooks.handle (file:///[...truncated...]/.svelte-kit/output/server/index.js:3543:61)
    at respond (file:///[...truncated...]/.svelte-kit/output/server/index.js:3302:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
Error: Not found: /_app/immutable/assets/nodes/fira-mono-all-400-normal.dpry7Ug7.woff
    at resolve (file:///[...truncated...]/.svelte-kit/output/server/index.js:3477:18)
    at resolve (file:///[...truncated...]/.svelte-kit/output/server/index.js:3304:34)
    at #options.hooks.handle (file:///[...truncated...]/.svelte-kit/output/server/index.js:3543:61)
    at respond (file:///[...truncated...]/.svelte-kit/output/server/index.js:3302:43)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

System Info

System:
    OS: Linux 6.1 Arch Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-4590 CPU @ 3.30GHz
    Memory: 2.48 GB / 15.57 GB
    Container: Yes
    Shell: 3.6.1 - /usr/bin/fish
  Binaries:
    Node: 14.21.3 - ~/.volta/tools/image/node/14.21.3/bin/node
    npm: 6.14.18 - ~/.volta/tools/image/node/14.21.3/bin/npm
    pnpm: 8.10.0 - ~/.volta/bin/pnpm
  npmPackages:
    @sveltejs/adapter-auto: ^2.0.0 => 2.1.1 
    @sveltejs/kit: ^1.27.4 => 1.27.6 
    svelte: ^4.0.5 => 4.2.5 
    vite: ^5.0.0 => 5.0.0 

Severity

blocking an upgrade

Additional Information

Initially reported in #11062. Not a huge deal for me since i'm still on vite 4. But this should be resolved before support for vite 5 is officially announced.

[benmccann]

FYI @dominikg @bluwy

[benmccann]

The CSS contains a relative URL to the font url(./fira-mono-all-400-normal.1e3b098c.woff). In Vite 4, the CSS is output into the assets directory: .svelte-kit/output/client/_app/immutable/assets/0.fa9427ff.css. In Vite 5, the CSS is output into the nodes directory: .svelte-kit/output/client/_app/immutable/assets/nodes/0.e1dUBGNb.css.

[benmccann]

Not sure if it's related, but the Rollup 4 migration guide states:

Also, the path of a module is no longer prepended to the file name automatically but is included in the [name] placeholder.

However, it's unclear if this only occurs when preserveModules: true. We- have not set this and so would have the default value of false.

[benmccann]

It seems it is being caused by:

kit/packages/kit/src/exports/vite/index.js

Line 536 in a7f8bdc

input[`nodes/${i}`] = `${kit.outDir}/generated/client-optimized/nodes/${i}.js`;

[benmccann]

This was fixed in Vite 5.0.3