Laravel 9 切换到 vite 现在 ENOSPC 文件观察器限制已达到

Question

自 Jetstream 的早期版本以来，我一直在使用 Laravel 9。

遵循vite 升级指南后，我运行了命令

npm run dev

我得到以下错误堆栈跟踪：

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

这是我的文件配置：

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;

我如何解决它？

我错过了什么？

解决了

看起来它现在正在工作。

我所做的是重新启动我的计算机，现在npm run dev正在正常工作并且没有抛出任何错误：

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

Answer 1

我过去遇到过这个问题，并使用这个答案来解决这个问题。

在您的情况下，重新启动可能暂时解决了问题，因为当您的计算机重新启动时，并非所有使用文件观察程序的程序都会重新启动。

在某些时候，如果你没有改变你的环境，你会遇到同样的问题。 要获得更永久的修复，请从我上面链接的答案中尝试：

如果您使用的是 Linux，您的项目将达到系统的文件观察程序限制

要解决此问题，请在您的终端上尝试：

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