[v3.x] - public/fonts/font.woff in index.html contains __VITE_PUBLIC_ASSET__

[ihmpavel]

Describe the bug

Working fine prior 3.0.0. Tested up to 3.0.1

Having a font in in /public/fonts/font.woff referencing in index.html makes build not working.

The path is not changed, but contains __VITE_PUBLIC_ASSET__hash__

1. Create /public/fonts/font.woff (needs to be in fonts folder)
2. Create index.html with

@font-face {
      font-family: 'Open Sans';
      font-style: normal;
      font-weight: 400;
      font-display: swap;
      src: url('/fonts/opensans-regular.woff2') format('woff2'),
        url('/fonts/opensans-regular.woff') format('woff'),
        url('/fonts/opensans-regular.ttf') format('truetype');
    }

3. vite build
4. The created index.html now contains ... src: url('__VITE_PUBLIC_ASSET__f5439943__') format('woff2'), url('__VITE_PUBLIC_ASSET__ee5c699b__') format('woff'), url('__VITE_PUBLIC_ASSET__fbd96617__') .... Public folder has correct files
5. Load page - fonts will respond 404

Reproduction

https://stackblitz.com/edit/vitejs-vite-5k3e58?file=dist%2Findex.html&terminal=dev

System Info

System:
    OS: macOS 12.4
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.79 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    Yarn: 1.22.19 - ~/.bin/yarn
    npm: 8.11.0 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.5

Used Package Manager

yarn

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.

[ihmpavel]

That looks like the issue is with url(...), where vite is trying to do (optimize?) something. Having <link href="/xyz/xyz.png" rel="..." ... /> is working fine.

[nvh95]

We are having the same issue when migrating vite 2 to vite 3 bestofjs/bestofjs#148 (comment)

It works fine in dev mode.

To reproduce:

git clone https://github.com/bestofjs/bestofjs-webui
cd bestofjs-webui
git checkout 924d740ea6e7f80818d6e183dcef5a4b3e51a316
npm install
npm run build
npm run preview

Open app in browser and navigate to Font requests

File such as https://bestofjs-git-vite3-bestofjs.vercel.app/__VITE_PUBLIC_ASSET__03d6a1cf__ does not exist, it supposes to be a woff/woff2 file

Online link:
https://bestofjs-68pbasy3a-bestofjs.vercel.app/

[nvh95]

[Update]: Please update to vite >= 3.0.4 to get this issue fixed.
I can find a workaround by changing the URL of the font to the relative path. You can use this while Vite team is working on this.

-        src: url('/fonts/OpenSans.woff') format('woff');
+        src: url('./public/fonts/OpenSans.woff') format('woff');

cc: @ihmpavel

[nvh95]

Please update to vite >= 3.0.4 to get this issue fixed.