Vite.Config.Js and import Issues
Maybe specific to me/my abilities, but struggling importing some things with control access via vite.config.js.
I am trying to import from public folder,
@import "../../public/assets/fonts/gordita/stylesheet.css";
@import "../../public/assets/fonts/bootstrap-icons-1.11.1/font/bootstrap-icons.css";
@import "../../public/assets/fonts/font-awesome-6.4.2/css/all.css";
@import "../../public/assets/scss/style.scss";
Heres the vite config:
import { defineConfig } from 'vite';
export default defineConfig({
server: {
fs: {
allow: ['.']
},
},
})
/// <reference types="vite/client" />
but still getting error: [ Client!] The request url "X" is outside of Vite serving allow list.
I have exhausted every resource trying to get this to work and wondering if its to do with Wasp or just myself. Thanks for all the help!
14 Replies
Hi @Sam Jakshtis. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
It seems like you're encountering an issue with Vite's server configuration, specifically with the
fs.allow option. This option is used to specify directories that the server can load files from. By default, Vite only allows loading files from the project root directory and its subdirectories. If you're trying to load files from outside of these directories, you'll encounter the error message you're seeing.
In your case, you're trying to import files from the public directory. This should be within the project root directory, so it's strange that you're encountering this error. However, there are a few things you could try:
1. Check your file paths: Make sure that the paths you're using in your @import statements are correct. If the paths are incorrect, Vite might be trying to load files from outside of the allowed directories.
2. Use the resolveProjectPath helper: There's a helper function in Wasp called resolveProjectPath that you can use to resolve paths to files in your project. This function is mentioned in a Discord support thread (https://discord.com/channels/686873244791210014/1216399816750534728) and a Github issue (https://github.com/wasp-lang/wasp/issues/1874). You can use this function in your @import statements to ensure that the paths are resolved correctly.
3. Customize your Vite config: You can customize your Vite config to allow loading files from additional directories. This is mentioned in the Wasp documentation (https://wasp-lang.dev/docs/project/custom-vite-config). However, be careful with this approach, as it can potentially break the Wasp client build process.
If none of these suggestions work, it might be a good idea to open a new issue on the Wasp Github (https://github.com/wasp-lang/wasp/issues) or ask for help in the Wasp Discord (https://discord.com/channels/686873244791210014/).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @Sam Jakshtis, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:
Perhaps try again in 15mins?@Sam Jakshtis it seems like the bot provided a good answer here: let us know if it helped or not!
@martinsos Somewhat, if I understand correctly I should add const { resolveProjectPath } = require('wasp/dev') to project, but I am not using tailwind for this one. Wondering how I add it to config for Vite? I apologize if I am missing the obvious
@Sam Jakshtis you are right, sorry I was a bit fast with my answer here! Let me actually check with @miho , he knows this part better.
@martinsos Thank you! @miho From the docs, I see that the resolve path is for tailwind, but not sure its configurable with the vite config? Heres where I am at, but still not working:
Wohooo @Sam Jakshtis, you just became a Waspeteer level 2!
import { defineConfig } from 'vite';
const { resolveProjectPath } = require('wasp/dev')
export default defineConfig({
server: {
fs: {
allow: [resolveProjectPath('public'), resolveProjectPath('src')]
},
},
})
/// <reference types="vite/client" />
FYI, you can use triple backticks ` <---- three times
To get nice looking code blocks:
Ok, so you got some assets you want to access from the
public folder. The Vite docs gives us some hints on when it's good to use the public folder:
If you have assets that are: Never referenced in source code (e.g. robots.txt) Must retain the exact same file name (without hashing) ...or you simply don't want to have to import an asset first just to get its URLhttps://vitejs.dev/guide/assets#the-public-directory It seems that you just want to use those assets like any other assets. Could you keep them simply in the
src folder?
If you really want to use things from the public folder, you need to import them with / prefix since they are served as static assets from the server. I'd recommend against this.@miho I apologize for conitnuing this, I am just really stuck. Heres my file structure: /src
/styles
/fonts
/gordita
stylesheet.css
Gordita-Medium.woff2
/bootstrap-icons-1.11.1
font
bootstrap-icons.css
/font-awesome-6.4.2
css
all.css
/scss
style.scss
index.scss and my index.scss is simple: @import "./fonts/gordita/stylesheet.css";
@import "./fonts/bootstrap-icons-1.11.1/font/bootstrap-icons.css";
@import "./fonts/font-awesome-6.4.2/css/all.css";
@import "./scss/style.scss"; but I still get this: The request url "/workspaces/Realti/src/styles/fonts/gordita/Gordita-Medium.woff2" is outside of Vite serving allow list. My current vite.config is same as out of the box because it works minus the fonts being imported. import { defineConfig } from 'vite'
export default defineConfig({
server: {
open: true,
},
})
I appreciate any help I am just so stuck right now
Alright, I'll take a look today 👍
Here's an old snippet related to using fonts from
node_modules dir in the meantime: https://gist.github.com/infomiho/9682e664948b84112074a69268f5673aGist
Using Wasp with @fontsource (Solution for the "The request url * is...
Using Wasp with @fontsource (Solution for the "The request url * is outside of Vite serving allow list" issue) - main.wasp
@Sam Jakshtis could you share your project's repository with me or upload the while project as a zip file? (Exclude the
node_modules dir if you a ziping the project)@miho I actually took a different route because I was taking some old next.js code and trying to uncompile (recompile) however you would say it haha and it was just some fonts that were not importing, but the overall structure was shaky, so I am redoing to be explicitly in Wasp