fontsource not included in .wasp/out
I am using the
@fontsource package to include google fonts and this was working just fine locally and on production. But since the migration to v.0.12 it is not working anymore locally.
Vite complains with the following message:
Which makes sense as it is not inside the .wasp/out folder.
Neither way of importing the @fontsource package works (from a .tsx file nor .scss)
Am i missing something? The deployed version of the app works just fine.16 Replies
Could you somehow share a bit more, like a sample of your project files so we can try to reproduce it?
i experience the same issue when using normal fonts source files inside the src directory (same error)
they only work in public
my code (this is in Main.css, gives the exact error)
Thanks @miho for the question.
I have the two fonts Roboto and Bebas-Neue as dependency in the package.json file:
And then import it inside my PageWrapper Component.tsx:
But the browser tries to load it directly from the root repository folder and not from the
.wasp dir which is outside the vite fs allow list.
As i am relying on an npm package https://www.npmjs.com/package/@fontsource/roboto i can not move it to the public folder like @owopi suggests would work.npm
@fontsource/roboto
Self-host the Roboto font in a neatly bundled NPM package.. Latest version: 5.0.12, last published: 7 days ago. Start using @fontsource/roboto in your project by running
npm i @fontsource/roboto. There are 479 other projects in the npm registry using @fontsource/roboto.Wohooo @Gwaggli, you just became a Waspeteer level 5!
- Given the error message, it seems a fairly common error with Vite and serving fonts from
node_modules (Vite disallows that by default, so we need to configure it to work properly for our fonts)
- We need to adjust the vite.config.ts to "teach" Vite how to support our @fontsource fonts 🙂
- 👉 The solution that worked for me: https://gist.github.com/infomiho/9682e664948b84112074a69268f5673a
Extra info:
- Wasp's docs on resolveProjectPath: https://wasp-lang.dev/docs/project/css-frameworks#enabling-tailwind-step-by-step (we need better docs, here's an issue: https://github.com/wasp-lang/wasp/issues/1874)
- Vite docs: https://vitejs.dev/config/server-options#server-fs-allow
- Related Stack Overflow issue: https://stackoverflow.com/questions/74902697/error-the-request-url-is-outside-of-vite-serving-allow-list-after-git-initNice, thank you very much for the gist. That worked for me. I did not know about the
import { resolveProjectPath } from 'wasp/dev' part when i was trying to resolve it myself.
Thanks a lot!@miho should we create an additional issue on GH that covers this?
(Vite disallows that by default, so we need to configure it to work properly for our fonts)In the sense that we want defaults for Wasp to cover this?
I don't think we want to modify this by default, but a nice section in the docs that describes this would be good 👍
Ok! And why not modify it by default? Is it protecting us from something? Some Vite defaults make sense for Vite, because they don't want to assume too much, but in Wasp we often can assume a bit more, so maybe this is one of those things we can assume safely?
It's a very user facing config which will have this weird line that is only needed rarely 😄 It'd rather keep the config clean since this is Vite specific and not Wasp specific. Other frameworks that use Vite won't include this line by default 🤷♂️
@miho should we open an issue for adding it to docs then though?
I've added this issue before: https://github.com/wasp-lang/wasp/issues/1874 maybe you can comment on the specific ideas to add there 🙂
GitHub
Improve our docs on
resolveProjectPath helper · Issue #1874 · was...Wasp exposes a helper called resolveProjectPath that is used to bridge the gap: for where users define paths in their config files e.g. Tailwind config and Vite config [project root dir] and where ...
Aha yo udon't think a specific issue for adding info about fontsource into docs is needed?
Please mention this in the issue and we can offer it as an example ofc
yep also works for me now 👍