Add server.watch.ignored to vite.config.js

[steks89]

I was having a problem with Vite being extremely slow, the problem was that Vite was watching my storage with thousands of files there,
took me some time to find the solution.

maybe we could have commented inside the vite.config.js on Laravel and laravel breeze, vite excluding vendor and storage?
by default it excludes, .git and node_modules,

export default defineConfig({ server: { watch: { ignored: ['**/vendor/**', '**/storage/**'] } }, });

[michaelk83]

Agreed, the vendor/ files rarely change at all, much less while the Vite dev server is running. Even if they do, most of them are irrelevant to the dev server. If a particular subfolder does need to be watched, it can be added with a dedicated entry:

export default defineConfig({
  server: {
    watch: {
      ignored: [
        '**/vendor/**', '**/storage/**',
        '!**/vendor/do/watch/this/one/**',
      ],
    },
  },
})

https://vitejs.dev/config/server-options.html#server-watch

[LucaRed]

I just had this problem in my development environment. I have a storage folder with lots of files inside, and Vite kept failing with the following error:

Error: ENOSPC: System limit for number of file watchers reached, watch [...]

Adding storage and vendor folders to the list of ignored files fixed the problem.

[MtDalPizzol]

I think the impact of this is being COMPLETELY overlooked. I spent the last 2 days tweaking configurations and even replacing tools in order to get to a minimal usable workflow. I was so frustrated that I even considered abandoning Vite for good.

The Vite docs on this are misleading, since it states this:

The Vite server watcher watches the root and skips the .git/ and node_modules/

The way directories are mentioned here, made me write the following config, which DIDN'T work:

export default defineConfig({
  server: {
    watch: {
      ignored: [
        'vendor/', // <----- IT DOESN'T WORK
        'storage/', // <----- IT DOESN'T WORK
      ],
    },
  },
})

You need to add the ** in order to get it working properly:

export default defineConfig({
  server: {
    watch: {
      ignored: [
        '**/vendor/**', // <----- WORKS PERFECTLY
        '**/storage/**', // <----- WORKS PERFECTLY
      ],
    },
  },
})

So, I believe this is something that everyone using Vite with Laravel are certainly being affected by. Sometimes not even realizing it and just dealing with slow workflows.

It seems like something that can certainly impact the framework adoption, since people coming from Nuxt, for instance, might notice the diference of performance and just assume that this is some particular weird interaction with laravel-vite-plugin and so on.

[LucaRed]

If we all agree with this and we don't find downsides, we could open a PR.

[MtDalPizzol]

Even if there's some downside to this, developers should at least be warned about this in the Laravel docs, since it's a problem that is not related to Vite itself, but to the fact that Vite is running in the Laravel folder structure context, which can contain tons of files that are not expected in a default Vite installation.

Having the watch.ignored config commented in the vite.config.mjs like @steks89 suggested is also a good idea.

But I think that, by default, we should ignore at least the vendor folder out of the box.

[michaelk83]

Just a heads up, since github doesn't seem to backlink on discussions - I've found an older related issue in laravel/vite-plugin#152 and linked to this discussion from there. One of the team members has just posted a reply there.