Wasp-lang•3mo ago

Outside of Vite service allow list

Hi Guys! I keep getting this randomly but for like every page.... [ Client!] The request url "/users/jacobferrari/documents/waspapp/my-saas/app/src/client/app/productpage.tsx" is outside of Vite serving allow list. it happens randomly. Is this a WASP thing? Let me know

16 Replies

kapa.ai•3mo ago

Hi @Zuck. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- This error message is related to Vite's configuration, which is used by Wasp. It seems that Vite is trying to access a file that is outside of its configured serving allow list. This can happen when you're trying to import resources (like images, fonts, or CSS) from outside the .wasp/out directory or node_modules. There have been similar issues reported by other Wasp users, particularly when trying to use multiple images for different breakpoints, importing fonts from node_modules with @fontsource, or importing external CSS. The common solution involves adjusting the vite.config.ts file to allow Vite to access the required resources. Here's a gist (https://gist.github.com/infomiho/9682e664948b84112074a69268f5673a) that worked for some users. It involves using the resolveProjectPath helper from Wasp to correctly resolve the paths of the resources. You might need to adjust it to fit your specific use case. If you're still having trouble, it would be helpful to know more about your project setup and the specific circumstances that trigger this error. For example, are you trying to import a resource from a specific location when this error occurs? For more information, you can refer to these discussions on the Wasp Discord server: fontsource not included in .wasp/out (https://discord.com/channels/686873244791210014/1216399816750534728), Vito Error (https://discord.com/channels/686873244791210014/1216865427729289338), and Importing external CSS (https://discord.com/channels/686873244791210014/1217414076569751563). You can also check out the related Github issue (https://github.com/wasp-lang/wasp/issues/1874) about improving the documentation for the resolveProjectPath helper. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zuck, 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?

ZuckOP•3mo ago

Wow Kapa is sweet, ill go through this later but this will hopefully solve it @kapa.ai so if im importing this: export const customAssetUrls: TLUiAssetUrlOverrides = { icons: { 'scissor-icon': '/images/scissor-icon.svg', }, }; I just have to update my vite.config.ts to allow that?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Yes, you would need to update your vite.config.ts to allow Vite to access the images directory. You can use the resolveProjectPath helper from Wasp to correctly resolve the paths of the resources. Here's an example of how you might do it:

import { defineConfig } from 'vite'
import { resolveProjectPath } from '@wasp/core'

export default defineConfig({
  server: {
    fs: {
      allow: [
        // This will allow Vite to access the images directory
        resolveProjectPath('./images'),
      ]
    }
  }
})

import { defineConfig } from 'vite'
import { resolveProjectPath } from '@wasp/core'

export default defineConfig({
  server: {
    fs: {
      allow: [
        // This will allow Vite to access the images directory
        resolveProjectPath('./images'),
      ]
    }
  }
})

This will tell Vite to allow access to the images directory in your project. You might need to adjust the path to fit your specific project structure. Remember to be careful when making changes to the Vite config, as it can break the Wasp's client build process. You can check out the default Vite config here (https://github.com/wasp-lang/wasp/blob/release/waspc/data/Generator/templates/react-app/vite.config.ts) to see what you can change. For more information, you can refer to the Wasp documentation on customizing the Vite config (https://wasp-lang.dev/docs/project/custom-vite-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zuck, 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?

ZuckOP•3mo ago

@kapa.ai so what would the full code be for vite.config.ts? import { defineConfig } from 'vite'; export default defineConfig({ server: { open: true, }, });

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Sure, if you want to keep the server open and also allow access to the images directory, your vite.config.ts would look like this:

import { defineConfig } from 'vite'
import { resolveProjectPath } from '@wasp/core'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // This will allow Vite to access the images directory
        resolveProjectPath('./images'),
      ]
    }
  }
})

import { defineConfig } from 'vite'
import { resolveProjectPath } from '@wasp/core'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // This will allow Vite to access the images directory
        resolveProjectPath('./images'),
      ]
    }
  }
})

This configuration will tell Vite to keep the server open and also allow access to the images directory in your project. You might need to adjust the path to fit your specific project structure. Remember to be careful when making changes to the Vite config, as it can break the Wasp's client build process. You can check out the default Vite config here (https://github.com/wasp-lang/wasp/blob/release/waspc/data/Generator/templates/react-app/vite.config.ts) to see what you can change. For more information, you can refer to the Wasp documentation on customizing the Vite config (https://wasp-lang.dev/docs/project/custom-vite-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zuck, 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?

ZuckOP•3mo ago

@kapa.ai im getting this now.. [ Client!] 7:34:21 PM [vite] Pre-transform error: Failed to load url /src/index.tsx (resolved id: /Users/jacobferrari/Documents/WASPApp/my-saas/app/.wasp/out/web-app/src/index.tsx). Does the file exist? [ Client!] The request url "/Users/jacobferrari/Documents/WASPApp/my-saas/app/.wasp/out/web-app/src/index.tsx" is outside of Vite serving allow list. [ Client!] [ Client!] - /Users/jacobferrari/Documents/WASPApp/my-saas/app/public/images [ Client!] - /Users/jacobferrari/Documents/WASPApp/my-saas/app/.wasp/out/web-app/node_modules/vite/dist/client [ Client!] [ Client!] Refer to docs https://vitejs.dev/config/server-options.html#server-fs-allow for configurations and more details. [ Client!] [ Client!] 7:34:22 PM [vite] Pre-transform error: Failed to load url /src/index.tsx (resolved id: /Users/jacobferrari/Documents/WASPApp/my-saas/app/.wasp/out/web-app/src/index.tsx). Does the file exist? [ Client!] 7:34:22 PM [vite] Pre-transform error: Failed to load url /src/index.tsx (resolved id: /Users/jacobferrari/Documents/WASPApp/my-saas/app/.wasp/out/web-app/src/index.tsx). Does the file exist?

vitejs

Server Options

Next Generation Frontend Tooling

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The error message indicates that Vite is trying to access a file (/src/index.tsx) that is outside of its configured serving allow list. This can happen when you're trying to import resources from outside the .wasp/out directory or node_modules. In your vite.config.ts, you have allowed Vite to access the images directory. However, it seems like Vite also needs access to the .wasp/out/web-app/src directory where your index.tsx file is located. You can update your vite.config.ts to include this directory in the allow list:

import { defineConfig } from 'vite'
import { resolveProjectPath } from '@wasp/core'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // This will allow Vite to access the images directory
        resolveProjectPath('./images'),
        // This will allow Vite to access the .wasp/out/web-app/src directory
        resolveProjectPath('./.wasp/out/web-app/src'),
      ]
    }
  }
})

import { defineConfig } from 'vite'
import { resolveProjectPath } from '@wasp/core'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // This will allow Vite to access the images directory
        resolveProjectPath('./images'),
        // This will allow Vite to access the .wasp/out/web-app/src directory
        resolveProjectPath('./.wasp/out/web-app/src'),
      ]
    }
  }
})

This configuration will tell Vite to keep the server open and also allow access to the images and .wasp/out/web-app/src directories in your project. You might need to adjust the paths to fit your specific project structure. Remember to be careful when making changes to the Vite config, as it can break the Wasp's client build process. You can check out the default Vite config here (https://github.com/wasp-lang/wasp/blob/release/waspc/data/Generator/templates/react-app/vite.config.ts) to see what you can change. For more information, you can refer to the Wasp documentation on customizing the Vite config (https://wasp-lang.dev/docs/project/custom-vite-config) and the Vite documentation on server options (https://vitejs.dev/config/server-options.html#server-fs-allow). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zuck, 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?

ZuckOP•3mo ago

@kapa.ai hmm feels weird though because vite should already have acces to that

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're correct. By default, Vite should have access to the .wasp/out directory, which is where the Wasp compiler outputs the generated code. If you're seeing this error, it might be due to some other issue. One possibility could be a misconfiguration in your vite.config.ts file. If you've made changes to this file, it might be worth reverting them to the default configuration and see if the issue persists. The default vite.config.ts for a Wasp project should look like this:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    open: true,
  },
});

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    open: true,
  },
});

If reverting to the default configuration doesn't solve the issue, it might be worth checking if there are any issues with your project structure or if there are any missing files. The error message suggests that Vite is unable to find the index.tsx file in the /src directory. If you're still having trouble, it might be helpful to share more details about your project setup or any changes you've made to the default Wasp project structure. This could help identify any potential issues or misconfigurations. For more information, you can refer to the Wasp documentation on project structure (https://wasp-lang.dev/docs/tutorial/project-structure) and the Wasp documentation on customizing the Vite config (https://wasp-lang.dev/docs/project/custom-vite-config). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zuck, 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?

ZuckOP•3mo ago

@kapa.ai is there a better way to pinpoint where the error is coming from?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- Debugging issues like this can be tricky, but there are a few strategies you can use to help pinpoint where the error is coming from: 1. Check the error message: The error message often contains useful information about what went wrong and where. In this case, the error message is telling you that Vite is trying to access a file (/src/index.tsx) that is outside of its serving allow list. This suggests that there might be an issue with how Vite is configured in your project. 2. Check your project structure: Make sure that the file Vite is trying to access (/src/index.tsx) actually exists in your project and is in the correct location. If the file is missing or in the wrong place, that could be causing the error. 3. Check your Vite configuration: If the file exists and is in the correct location, the issue might be with your Vite configuration. You can check your vite.config.ts file to see how Vite is configured. Make sure that Vite is allowed to access the directory where the file is located. 4. Use a process of elimination: If you're still not sure where the error is coming from, you can try commenting out parts of your code or disabling certain features to see if the error goes away. This can help you narrow down which part of your code is causing the issue. 5. Ask for help: If you're still stuck, don't hesitate to ask for help. You can post a question on the Wasp Discord server (https://discord.com/invite/rzdnErX) or open an issue on the Wasp GitHub repository (https://github.com/wasp-lang/wasp). Be sure to include as much information as possible about your project setup and the specific error you're encountering. Remember, debugging is often a process of trial and error, so don't get discouraged if you don't find the solution right away. Keep trying different things and you'll eventually figure it out. Good luck! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zuck, 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?

ZuckOP•3mo ago

@kapa.ai the weird thing is its happening for basically every page and happens randomly usually the first time i access the page.

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- That does sound unusual. If the error is happening randomly and for every page, it might be an issue with the development server or a problem with the build process. Here are a few things you could try: 1. Restart the development server: Sometimes, issues can be resolved simply by stopping and restarting the development server. If you haven't already done so, try this first. 2. Clear the cache: Vite uses a cache to speed up the build process. If this cache becomes corrupted, it can cause issues. You can clear Vite's cache by deleting the node_modules/.vite directory and then restarting the development server. 3. Reinstall dependencies: It's possible that there could be an issue with one of your project's dependencies. You can try deleting the node_modules directory and the yarn.lock file (or package-lock.json if you're using npm), and then reinstalling your dependencies with yarn install (or npm install). 4. Check for updates: Make sure you're using the latest version of Wasp and all other dependencies. You can check for updates using yarn outdated (or npm outdated) and update to the latest versions with yarn upgrade (or npm update). 5. Check your code: Make sure there are no syntax errors or other issues in your code that could be causing the build process to fail. Pay particular attention to any recent changes you've made. If none of these suggestions help, it would be a good idea to reach out to the Wasp community for further assistance. You can post a question on the Wasp Discord server (https://discord.com/invite/rzdnErX) or open an issue on the Wasp GitHub repository (https://github.com/wasp-lang/wasp). Be sure to include as much information as possible about your project setup and the specific error you're encountering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Zuck, 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?

ZuckOP•3mo ago

Super weird... let me know if anyone can help on this i'm getting stuff like this: [ Client!] The request url "/users/jacobferrari/documents/waspapp/my-saas/app/.wasp/out/sdk/wasp/dist/auth/forms/internal/email/useemail.js" is outside of Vite serving allow list. [ Client!] The request url "/users/jacobferrari/documents/waspapp/my-saas/app/.wasp/out/sdk/wasp/dist/auth/email/actions/login.js" is outside of Vite serving allow list. [ Client!] The request url "/users/jacobferrari/documents/waspapp/my-saas/app/.wasp/out/sdk/wasp/dist/auth/forms/internal/common/loginsignupform.jsx" is outside of Vite serving allow list. [ Client!] The request url "/users/jacobferrari/documents/waspapp/my-saas/app/.wasp/out/sdk/wasp/dist/auth/forms/internal/email/useemail.js" is outside of Vite serving allow list. [ Client!] The request url "/users/jacobferrari/documents/waspapp/my-saas/app/.wasp/out/sdk/wasp/dist/auth/email/actions/login.js" is outside of Vite serving allow list. [ Client!] The request url "/users/jacobferrari/documents/waspapp/my-saas/app/.wasp/out/sdk/wasp/dist/auth/forms/internal/common/loginsignupform.jsx" is outside of Vite serving allow list. even after a wasp clean. My app works fine, just getting those errors randomly -- Okay i fixed it but idk if this will screw me up in the future. I changed my vite config to this: import { defineConfig } from 'vite' import { resolveProjectPath } from 'wasp/dev' export default defineConfig({ resolve: { alias: { '@': resolveProjectPath('src'), }, }, server: { fs: { allow: [ resolveProjectPath('.'), resolveProjectPath('node_modules'), // Add any other necessary paths here ] } } }) and I added this to tsconfig.json: "baseUrl": ".", "paths": { "@/": ["src/"] } }

miho•3mo ago

Did you check the snippet Kapa sent over? This is the crucial part:

import { resolveProjectPath } from 'wasp/dev'
import { defineConfig, searchForWorkspaceRoot } from 'vite'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // Keeping the original behaviour how Vite searches for the workspace root
        // https://vitejs.dev/config/server-options#server-fs-allow
        searchForWorkspaceRoot(process.cwd()),
        // Allow serving files from the node_modules/@fontsource directory
        // (using Wasp's helper to resolve project path)
        resolveProjectPath('./node_modules/@fontsource'),
      ]
    }
  },
})

import { resolveProjectPath } from 'wasp/dev'
import { defineConfig, searchForWorkspaceRoot } from 'vite'

export default defineConfig({
  server: {
    open: true,
    fs: {
      allow: [
        // Keeping the original behaviour how Vite searches for the workspace root
        // https://vitejs.dev/config/server-options#server-fs-allow
        searchForWorkspaceRoot(process.cwd()),
        // Allow serving files from the node_modules/@fontsource directory
        // (using Wasp's helper to resolve project path)
        resolveProjectPath('./node_modules/@fontsource'),
      ]
    }
  },
})

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

ZuckOP•3mo ago

@miho I'm not using fontsource, but if add this part should things be good? export default defineConfig({ server: { open: true, fs: { allow: [ // Keeping the original behaviour how Vite searches for the workspace root // https://vitejs.dev/config/server-options#server-fs-allow searchForWorkspaceRoot(process.cwd()),

vitejs

Server Options

Next Generation Frontend Tooling

Gaming

Programming

Outside of Vite service allow list