Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to load font files referenced in a node_modules CSS file #9148

Closed
7 tasks done
Sak32009 opened this issue Jul 15, 2022 · 4 comments · Fixed by #9173
Closed
7 tasks done

Unable to load font files referenced in a node_modules CSS file #9148

Sak32009 opened this issue Jul 15, 2022 · 4 comments · Fixed by #9173
Labels
p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) possible regression The issue only appears after a new release

Comments

@Sak32009
Copy link

Sak32009 commented Jul 15, 2022

Describe the bug

From version v2.9.13 up to the latest, if you try to import @mdi/font the icon is not displayed.
In build mode everything works fine, but in dev mode it doesn't.

http://127.0.0.1:5173/@fs/C:/Users/sak32/Documents/GitHub/Vite/node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2?v=6.9.96

If you try to open the url directly it doesn't work, if you remove the query string it works.

I think it's his fault: e109d64

Reproduction

https://stackblitz.com/edit/vitejs-vite-x9um9q?file=main.js

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 7.58 GB / 15.93 GB
  Binaries:
    Node: 16.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.2.1 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.11.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.49)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    vite: ^3.0.0 => 3.0.0

Used Package Manager

yarn

Logs

No response

Validations

@sapphi-red
Copy link
Member

sapphi-red commented Jul 16, 2022

image
I was not able to reproduce with both 2.9.14 and 3.0.0 on stackblitz and Windows.

@sapphi-red sapphi-red added the cannot reproduce The bug cannot be reproduced label Jul 16, 2022
@fbellomi
Copy link

fbellomi commented Jul 16, 2022

I also see this behavior; it appeared in v3 beta 8 (beta 7 works fine)
Details are different, but it is a font in node_modules referenced by CSS, which works if the query part of the URL is removed
I'm on macOS

@Sak32009
Copy link
Author

Sak32009 commented Jul 17, 2022

image I was not able to reproduce with both 2.9.14 and 3.0.0 on stackblitz and Windows.

Because in this case the url is no longer http://127.0.0.1:5173/@fs/C:/Users/sak32/Documents/GitHub/Vite/node_modules/@mdi/font/fonts/materialdesignicons-webfont.woff2?v=6.9.96, but http://127.0.0.1:5173/node_modules/@mdi/font/css/materialdesignicons.css

In my project https://github.com/Sak32009/SteamLauncher, if you update vite the problem is reproducible.

SteamLauncher 17_07_2022 13_40_43

@sapphi-red sapphi-red added p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) possible regression The issue only appears after a new release and removed pending triage cannot reproduce The bug cannot be reproduced labels Jul 17, 2022
sapphi-red added a commit to sapphi-red/vite that referenced this issue Jul 17, 2022
sapphi-red added a commit to sapphi-red/vite that referenced this issue Jul 17, 2022
@deep-cognite
Copy link

deep-cognite commented Jul 18, 2022

We are facing the same issue with Vite version ^2.8.6, though, it works fine coming from react 17. But when upgrading to react 18 for the monorepo, the fonts won't load.

Edit: pinning the version to 2.9.12 solved the issue for us!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
p3-minor-bug 🔨 An edge case that only affects very specific usage (priority) possible regression The issue only appears after a new release
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants