W
Wasp-langβ€’8mo ago
Gwaggli

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:
The request url "/Users/path/to/repository/node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff2" is outside of Vite serving allow list.
The request url "/Users/path/to/repository/node_modules/@fontsource/roboto/files/roboto-latin-400-normal.woff2" is outside of Vite serving allow list.
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
miho
mihoβ€’8mo ago
Could you somehow share a bit more, like a sample of your project files so we can try to reproduce it?
owopi
owopiβ€’8mo ago
i experience the same issue when using normal fonts source files inside the src directory (same error) they only work in public
owopi
owopiβ€’8mo ago
my code (this is in Main.css, gives the exact error)
No description
Gwaggli
Gwaggliβ€’8mo ago
Thanks @miho for the question. I have the two fonts Roboto and Bebas-Neue as dependency in the package.json file:
"dependencies": {
...
"@fontsource/roboto": "^5.0.8",
"@fontsource/bebas-neue": "^5.0.12",
...
},
"dependencies": {
...
"@fontsource/roboto": "^5.0.8",
"@fontsource/bebas-neue": "^5.0.12",
...
},
And then import it inside my PageWrapper Component.tsx:
import '@fontsource/roboto/300.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'

import '@fontsource/bebas-neue/400.css'
import '@fontsource/roboto/300.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'

import '@fontsource/bebas-neue/400.css'
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.
MEE6
MEE6β€’8mo ago
Wohooo @Gwaggli, you just became a Waspeteer level 5!
miho
mihoβ€’8mo ago
- 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-init
Gwaggli
Gwaggliβ€’8mo ago
Nice, 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!
martinsos
martinsosβ€’8mo ago
@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?
miho
mihoβ€’8mo ago
I don't think we want to modify this by default, but a nice section in the docs that describes this would be good πŸ‘
martinsos
martinsosβ€’8mo ago
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?
miho
mihoβ€’8mo ago
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 πŸ€·β€β™‚οΈ
martinsos
martinsosβ€’8mo ago
@miho should we open an issue for adding it to docs then though?
miho
mihoβ€’8mo ago
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 ...
martinsos
martinsosβ€’8mo ago
Aha yo udon't think a specific issue for adding info about fontsource into docs is needed?
miho
mihoβ€’8mo ago
Please mention this in the issue and we can offer it as an example ofc
owopi
owopiβ€’8mo ago
yep also works for me now πŸ‘
Want results from more Discord servers?
Add your server