Wasp•2y ago

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!

kapa.ai•7/1/24, 4:01 PM

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:

kapa.ai•7/1/24, 4:01 PM

----------------------
It seems like you're encountering an issue with Vite's server configuration, specifically with the fs.allowfs.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 publicpublic 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:

Check your file paths: Make sure that the paths you're using in your @import@import statements are correct. If the paths are incorrect, Vite might be trying to load files from outside of the allowed directories.
Use the resolveProjectPathresolveProjectPath helper: There's a helper function in Wasp called resolveProjectPathresolveProjectPath that you can use to resolve paths to files in your project. This function is mentioned in a Discord support thread (🙋questionsfontsource not included in .wasp/out) and a Github issue (https://github.com/wasp-lang/wasp/issues/1874). You can use this function in your @import@import statements to ensure that the paths are resolved correctly.
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.

kapa.ai•7/1/24, 4:02 PM

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:
----------------------

kapa.ai•7/1/24, 4:02 PM

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?

martinsos•7/1/24, 4:24 PM

@Sam Jakshtis it seems like the bot provided a good answer here: let us know if it helped or not!

Sam JakshtisOP•7/1/24, 4:30 PM

@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

martinsos•7/1/24, 4:35 PM

@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.

Sam JakshtisOP•7/1/24, 5:32 PM

@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:

MEE6•7/1/24, 5:32 PM

Wohooo @Sam Jakshtis, you just became a Waspeteer level 2!

Sam JakshtisOP•7/1/24, 5:32 PM

import { defineConfig } from 'vite';
const { resolveProjectPath } = require('wasp/dev')

export default defineConfig({
server: {
fs: {
allow: [resolveProjectPath('public'), resolveProjectPath('src')]
},
},
})

/// <reference types="vite/client" />

miho•7/2/24, 8:46 AM

FYI, you can use triple backticks ` <---- three times

To get nice looking code blocks:

import { defineConfig } from 'vite';
const { resolveProjectPath } = require('wasp/dev')


export default defineConfig({
    server: {
        fs: {
            allow: [resolveProjectPath('public'), resolveProjectPath('src')]
        },
    },
})

import { defineConfig } from 'vite';
const { resolveProjectPath } = require('wasp/dev')


export default defineConfig({
    server: {
        fs: {
            allow: [resolveProjectPath('public'), resolveProjectPath('src')]
        },
    },
})

miho•7/2/24, 8:50 AM

Ok, so you got some assets you want to access from the publicpublic folder. The Vite docs gives us some hints on when it's good to use the publicpublic 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 URL

https://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 srcsrc folder?

If you really want to use things from the publicpublic folder, you need to import them with // prefix since they are served as static assets from the server. I'd recommend against this.

vitejs

Static Asset Handling

Next Generation Frontend Tooling

Sam JakshtisOP•7/2/24, 6:32 PM

@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

miho•7/3/24, 8:40 AM

Alright, I'll take a look today

miho•7/3/24, 12:29 PM

Here's an old snippet related to using fonts from node_modulesnode_modules dir in the meantime: https://gist.github.com/infomiho/9682e664948b84112074a69268f5673a

Gist

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

miho•7/3/24, 12:40 PM

@Sam Jakshtis could you share your project's repository with me or upload the while project as a zip file? (Exclude the node_modulesnode_modules dir if you a ziping the project)

Sam JakshtisOP•7/3/24, 5:59 PM

@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

Vite.Config.Js and import Issues

Similar Threads

Similar Threads

Similar Threads