Error: `The request url * is outside of Vite serving allow list` after git init of submodule inside pnpm monorepo workspace

Question

I have setup a pnpm workspace with a number of projects that I am adding as git submodules.

A previously working Nuxt project suddenly started giving the error The request url * is outside of Vite serving allow list for multiple files, including dependencies installed as pnpm modules inside the workspace node_modules folder.

The only change had been to initialise my project as a git repository.

I was expecting the dev server to keep working, and that changes to git would not have any effect.

The project still builds ok.

Neidaneidhardt

Related (unanwsered) questions: #74326998, #74264804 – Neidaneidhardt

Answer 1

Vite uses "auto workspace root detection" to figure out where your project root is.

Within a pnpm workspace your project's node_modules will be installed at the root of the workspace and not within your project folder.

As soon as you initialise a git repository for your project within the workspace then vite seems to auto detect this as your project root and not the workspace (which I'm presuming is initialised as a git repo which you are adding submodules to).

The solution is to specify the pnpm workspace as an allowed directory for the vite server

export default defineNuxtConfig({
    vite: {
        server: {
            fs: {
                allow: ["/home/user/Monorepo"]
            }
        }
    }
})

vite: server-fs-allow

Neidaneidhardt

Works nice with absolute paths, but couldn't figure out how to make it work with relative paths (better in teams). – Mcknight

I tried this: https://mcmap.net/q/1160739/-static-site-generation-with-nuxt-js-using-relative-paths but the only thing that worked (but it feels a little bit dirty) is, instead of setting vite.server.fs.allow as you did, setting vite.server.fs.strict to false. – Mcknight

#71113923 – Neidaneidhardt

I've tried this solution with my own user path to the project, but still getting "Failed to load url" and "The request url...is outside of Vite serving allow list" errors. I'm not using pnpm workspace. My Node version is v18.15.0. Nuxt 3.3.3. My Nuxt app also worked fine before initializing as git repository. Now the app is constantly trying to load (browser tab spinning) and does not hot-reload. Is there something I'm missing? Any help appreciated! – Tarkany

@Anelec It's hard to say without knowing what you are using, npm workspace? You might also be able to output the result of searchForWorkspaceRoot to help with debugging and compare this to where your node_modules are in your setup. If that's not enough to resolve the issue then I'd suggest asking your own question and linking it to this one, then you can explain properly what your setup is and how/why this solution isn't working for you. hth – Neidaneidhardt

@Neidaneidhardt thanks for your response! i'm new to nuxt and don't know how to do the searchForWorkspaceRoot function...but yes I'm using an npm workspace and here's a repo of the test project in which i'm getting the errors. i'm happy to create a new question too, if this is too much for comments – Tarkany

@Tarkany the path you've used in the allow array looks suspect to me – Neidaneidhardt

@Neidaneidhardt wow. i added a few more lines to the code. including a path to the local project and a path to the global "node_modules" folder on the system – with and without the asterisk to include all folders within....that seemed to do the trick. thanks so much for your help. you have no idea how long this took me and i don't know why it didn't work before. – Tarkany

Answer 2

This is the recommanded way :

import { defineConfig, searchForWorkspaceRoot } from 'vite'
  
export default defineConfig({
  server: {
    fs: {
      allow: [
        // search up for workspace root
        searchForWorkspaceRoot(process.cwd()),
        // your custom rules
        '/path/to/custom/allow',
      ],
    },
  },
})

Kolnick

Answer 3

If you are using svelte kit, the error might happen when trying to import a file from outside the src folder.

So if you can move said file to that folder, it's an easier fix, otherwise, the answer is @a2k42 's solution.

Araucania

Answer 4

Allow file serving outside of project root with relative path:

server: {
  fs: {
    // Allow serving files from one level up to the project root
    allow: ['..'],
  },
},

Activate

Answer 5

turn the security off. I have not heard of anything dumber than a secure frontend, its literally a contradiction.

   viteConf.server = {
          ...viteConf.server,
          fs: {
            strict: false // Disable strict file serving restrictions
          }
        };

Nominative