Laravel 9 switched to vite now ENOSPC limit of file watchers reached

Question

I'd been using Laravel 9 since the early version with Jetstream.

After having followed the vite upgrade guide I ran the command

npm run dev

And I got the following error stack trace:

VITE v3.0.7  ready in 282 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

  LARAVEL v9.24.0  plugin v0.5.3

  ➜  APP_URL: https://myproject.test
node:internal/errors:466
    ErrorCaptureStackTrace(err);
    ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/user/code/myproject/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Style/NumberFormat/PercentageFormatter.php'
    at FSWatcher.<computed> (node:internal/fs/watchers:244:19)
    at Object.watch (node:fs:2306:34)
    at createFsWatchInstance (file:///home/user/code/myproject/node_modules/vite/dist/node/chunks/dep-0f13c890.js:47558:17)
    at setFsWatchListener (file:///home/user/code/myproject/node_modules/vite/dist/node/chunks/dep-0f13c890.js:47605:15)
    at NodeFsHandler$1._watchWithNodeFs (file:///home/user/code/myproject/node_modules/vite/dist/node/chunks/dep-0f13c890.js:47760:14)
    at NodeFsHandler$1._handleFile (file:///home/user/code/myproject/node_modules/vite/dist/node/chunks/dep-0f13c890.js:47824:23)
    at NodeFsHandler$1._addToNodeFs (file:///home/user/code/myproject/node_modules/vite/dist/node/chunks/dep-0f13c890.js:48066:21)
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (file:///home/user/code/myproject/node_modules/vite/dist/node/chunks/dep-0f13c890.js:49254:10)
    at NodeFsHandler$1._addToNodeFs (file:///home/user/code/myproject/node_modules/vite/dist/node/chunks/dep-0f13c890.js:48074:18) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/home/user/code/myproject/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Style/NumberFormat/PercentageFormatter.php',
  filename: '/home/user/code/myproject/vendor/phpoffice/phpspreadsheet/src/PhpSpreadsheet/Style/NumberFormat/PercentageFormatter.php'
}

Node.js v18.3.0

Here are my files configuration:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import react from '@vitejs/plugin-react';
// import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            colors:{
                primary: '#B5A365',
                danger: '#A8084D',
            },
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [require('@tailwindcss/forms'), require('@tailwindcss/typography')],
};

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.4.0",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.8",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.5.3",
        "lodash": "^4.17.19",
        "postcss": "^8.4.16",
        "postcss-import": "^14.0.1",
        "tailwindcss": "^3.1.8",
        "vite": "^3.0.7"
    }
}

phpunit.xml

<?xml version="1.0" encoding="UTF-8"?>
<phpunit xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:noNamespaceSchemaLocation="./vendor/phpunit/phpunit/phpunit.xsd"
         bootstrap="vendor/autoload.php"
         colors="true"
>
    <testsuites>
        <testsuite name="Unit">
            <directory suffix="Test.php">./tests/Unit</directory>
        </testsuite>
        <testsuite name="Feature">
            <directory suffix="Test.php">./tests/Feature</directory>
        </testsuite>
    </testsuites>
    <coverage processUncoveredFiles="true">
        <include>
            <directory suffix=".php">./app</directory>
        </include>
    </coverage>
    <php>
        <env name="APP_ENV" value="testing"/>
        <env name="BCRYPT_ROUNDS" value="4"/>
        <env name="CACHE_DRIVER" value="array"/>
        <!-- <env name="DB_CONNECTION" value="sqlite"/> -->
        <!-- <env name="DB_DATABASE" value=":memory:"/> -->
        <env name="MAIL_MAILER" value="array"/>
        <env name="QUEUE_CONNECTION" value="sync"/>
        <env name="SESSION_DRIVER" value="array"/>
        <env name="TELESCOPE_ENABLED" value="false"/>
    </php>
</phpunit>

app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

How do I fix it?

What am I missing?

Solved

Looks like it's working now.

What I did was to restart my computer and now npm run dev is working as it should and throws no errors:

16:25:13 [vite] page reload resources/views/components/layouts/pages.blade.php (x3)

Answer 1

I've hit this problem in the past, and used this answer to fix the problem.

In your case, rebooting may have fixed the problem temporarily, as not all the programs using file watchers will have re-started when your computer turned back on.

At some point, you'll hit the same issue if you haven't changed your environment. For a more permanent fix, try this from the answer I linked above:

If you are using Linux, your project is hitting your system's file watchers limit

To fix this, on your terminal, try:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Answer 2

Instead of increasing your watchers you should first try to ignore all the folders that are not relevant for vite using server.watch.ignored properties:

/// <reference types="vitest" />
import {defineConfig} from "vite";
import laravel, {refreshPaths} from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    ...
    server: {
        watch: {
            ignored: [
                '.idea',
                '.deploy',
                'app/**',
                'vendor/**',
                'bootstrap/**',
                'config/**',
                'data/**',
                'database/**',
                'docker/**',
                'routes/**',
                'storage/**',
                'stories/**'
            ]
        }
    },
    ...
}

Note, the above example includes folders that are for demonstration purposes and may differ from your actual setup.