Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

eventlistener's avatar

Vite not working out of the box

After a few days of struggling with Vite, I decided to install Laravel 10 again from scratch. I installed Laravel 10 with "laravel new my_app". After that I typed "npm run dev" and got this error:

> dev
> vite

sh: 1: vite: not found

Then I typed "npm run build" and got this error:

> build
> vite build

sh: 1: vite: not found

I did all of this according to the manual --> https://laravel.com/docs/10.x/vite How do I get Vite up and running?

Note that I tried about 20+ hours of stuff, which I did not describe here, before I resorted the the above method using a clean Laravel install.

0 likes
16 replies
LaryAI's avatar
LaryAI
AI
3 years ago
Level 58

It seems like Vite is not installed globally on your system. You can install it globally by running the following command:

npm install -g vite

After that, try running npm run dev and npm run build again and see if it works. If you still encounter issues, try deleting the node_modules folder and running npm install again to reinstall all dependencies.

If you don't want to install Vite globally, you can also try adding it as a dev dependency in your Laravel project by running:

npm install --save-dev vite

Then update your package.json file to include the following scripts:

"scripts": {
    "dev": "vite",
    "build": "vite build"
}

After that, try running npm run dev and npm run build again and see if it works.

eventlistener's avatar

Unfortunately that does not work. When I type "npm install -g vite" I get the following result:

added 14 packages in 3s

4 packages are looking for funding run npm fund for details

When I type "npm run dev" I see the following result:

> dev                                                                                                                                                                                                                                    
> vite

failed to load config from /mnt/laravel/my_app/vite.config.js
error when starting dev server:
Error: Cannot find module 'vite'
Require stack:
- /mnt/laravel/my_app/vite.config.js
- /home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/mnt/laravel/my_app/vite.config.js:35:19)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at _require.extensions.<computed> [as .js] (file:///home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62356:24)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)

The file package.json contains the following:

{                                                                                                                                                                                                                                        
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "vite": "^4.0.0"
    }
}

How can I get Vite to work properly?

eventlistener's avatar

@aruszala When I run "composer install && npm install" I get the following:

richard@home:/mnt/laravel/my_app$ composer install && npm install
Xdebug: [Step Debug] Could not connect to debugging client. Tried: localhost:9003 (fallback through xdebug.client_host/xdebug.client_port).
Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Nothing to install, update or remove
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi
Xdebug: [Step Debug] Could not connect to debugging client. Tried: localhost:9003 (fallback through xdebug.client_host/xdebug.client_port).

   INFO  Discovering packages.

  laravel/sail ........................................................................................................................ DONE
  laravel/sanctum ..................................................................................................................... DONE
  laravel/tinker ...................................................................................................................... DONE
  nesbot/carbon ....................................................................................................................... DONE
  nunomaduro/collision ................................................................................................................ DONE
  nunomaduro/termwind ................................................................................................................. DONE
  spatie/laravel-ignition ............................................................................................................. DONE

Xdebug: [Step Debug] Could not connect to debugging client. Tried: localhost:9003 (fallback through xdebug.client_host/xdebug.client_port).
80 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
npm ERR! code 1
npm ERR! path /mnt/laravel/my_app/node_modules/esbuild
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! node:internal/errors:490
npm ERR!     ErrorCaptureStackTrace(err);
npm ERR!     ^
npm ERR!
npm ERR! <ref *1> Error: spawnSync /mnt/laravel/my_app/node_modules/esbuild/bin/esbuild EACCES
npm ERR!     at Object.spawnSync (node:internal/child_process:1110:20)
npm ERR!     at spawnSync (node:child_process:871:24)
npm ERR!     at Object.execFileSync (node:child_process:914:15)
npm ERR!     at validateBinaryVersion (/mnt/laravel/my_app/node_modules/esbuild/install.js:96:28)
npm ERR!     at /mnt/laravel/my_app/node_modules/esbuild/install.js:283:5 {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'spawnSync /mnt/laravel/my_app/node_modules/esbuild/bin/esbuild',
npm ERR!   path: '/mnt/laravel/my_app/node_modules/esbuild/bin/esbuild',
npm ERR!   spawnargs: [ '--version' ],
npm ERR!   error: [Circular *1],
npm ERR!   status: null,
npm ERR!   signal: null,
npm ERR!   output: null,
npm ERR!   pid: 0,
npm ERR!   stdout: null,
npm ERR!   stderr: null
npm ERR! }
npm ERR!
npm ERR! Node.js v18.14.2

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/billybob/.npm/_logs/2023-03-11T20_56_13_569Z-debug-0.log
richard@home:/mnt/laravel/my_app$

After that I do "npm run dev" and "npm run build". They both produce a similar error message stating:

failed to load config from /mnt/laravel/my_app/vite.config.js
...
Error: Cannot find module 'vite'
...
aruszala's avatar

@eventlistener are you using Laravel Sail (Docker)?

Also, check your file system permissions.

Maybe try to delete the node_modules directory and run npm install again.

eventlistener's avatar

@aruszala Not using Sail or Docker. I deleted the node_modules folder and did npm install. You can see the result earlier in this threat.

CamKem's avatar

Are you using a starter kit? Also, can you please post & code block your vite.config.js? I tend to use Breeze starter kit for most Laravel applications I have been working on, even if I am not going to use the Views, just to prepare vite, tailwind & other dependancies that are installed with the starter kit & then just delete what I don't want. Deleting a couple of files, it much quicker & easier than configuring vite, tailwind, vue, etc.

eventlistener's avatar

@CamKem No, I am not using a starter kit or any other kit. This is a freshly installed Laravel app, installed like this:

laravel new my_app

Here is my vite.config.js:

import { defineConfig } from 'vite';                                                                                                                                                                                                     
import laravel from 'laravel-vite-plugin';

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

It should work out of the box without a starting kit. By the way, immediately after I install Laravel with "laravel new my_app", then I do "php artisan serve" I can see a working app in the browser. However when I try to activate Vite, the app gets messed up.

CamKem's avatar

@eventlistener I see no reason why it shouldn't be working, you config is standard. I assume you are using blade for views? (as you don't have Vue or React configured in your vite.config.js).

What does your package.json file look like, can you post it here?

eventlistener's avatar

@CamKem I still cannot get this to work. I am using Blade for views, but this is a brand new application without having touched anything in Blade. Here is my package.json:

{                                                                                                                                                                                                                                                                        
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "vite": "^4.0.0"
    }
}
eventlistener's avatar

I did a full output of the whole process so you can see everything from the installation of the app. At the end you can find the contents of vite.config.js and package.json and composer.json. What could be wrong in my settings?

richard@home:/mnt/laravel$ laravel new my_app2

   _                               _
  | |                             | |
  | |     __ _ _ __ __ ___   _____| |
  | |    / _` | '__/ _` \ \ / / _ \ |
  | |___| (_| | | | (_| |\ V /  __/ |
  |______\__,_|_|  \__,_| \_/ \___|_|

Creating a "laravel/laravel" project at "./my_app2"
Installing laravel/laravel (v10.0.4)
  - Installing laravel/laravel (v10.0.4): Extracting archive
Created project in /mnt/laravel/my_app2
> @php -r "file_exists('.env') || copy('.env.example', '.env');"
Loading composer repositories with package information
Updating dependencies
Lock file operations: 106 installs, 0 updates, 0 removals
  - Locking brick/math (0.10.2)
  - Locking dflydev/dot-access-data (v3.0.2)
  - Locking doctrine/inflector (2.0.6)
  - Locking doctrine/lexer (3.0.0)
  - Locking dragonmantank/cron-expression (v3.3.2)
  - Locking egulias/email-validator (4.0.1)
  - Locking fakerphp/faker (v1.21.0)
  - Locking filp/whoops (2.15.1)
  - Locking fruitcake/php-cors (v1.2.0)
  - Locking graham-campbell/result-type (v1.1.1)
  - Locking guzzlehttp/guzzle (7.5.0)
  - Locking guzzlehttp/promises (1.5.2)
  - Locking guzzlehttp/psr7 (2.4.4)
  - Locking guzzlehttp/uri-template (v1.0.1)
  - Locking hamcrest/hamcrest-php (v2.0.1)
  - Locking laravel/framework (v10.3.3)
  - Locking laravel/pint (v1.6.0)
  - Locking laravel/sail (v1.21.2)
  - Locking laravel/sanctum (v3.2.1)
  - Locking laravel/serializable-closure (v1.3.0)
  - Locking laravel/tinker (v2.8.1)
  - Locking league/commonmark (2.3.9)
  - Locking league/config (v1.2.0)
  - Locking league/flysystem (3.12.3)
  - Locking league/mime-type-detection (1.11.0)
  - Locking mockery/mockery (1.5.1)
  - Locking monolog/monolog (3.3.1)
  - Locking myclabs/deep-copy (1.11.1)
  - Locking nesbot/carbon (2.66.0)
  - Locking nette/schema (v1.2.3)
  - Locking nette/utils (v4.0.0)
  - Locking nikic/php-parser (v4.15.4)
  - Locking nunomaduro/collision (v7.1.0)
  - Locking nunomaduro/termwind (v1.15.1)
  - Locking phar-io/manifest (2.0.3)
  - Locking phar-io/version (3.2.1)
  - Locking phpoption/phpoption (1.9.1)
  - Locking phpunit/php-code-coverage (10.0.2)
  - Locking phpunit/php-file-iterator (4.0.1)
  - Locking phpunit/php-invoker (4.0.0)
  - Locking phpunit/php-text-template (3.0.0)
  - Locking phpunit/php-timer (6.0.0)
  - Locking phpunit/phpunit (10.0.16)
  - Locking psr/container (2.0.2)
  - Locking psr/event-dispatcher (1.0.0)
  - Locking psr/http-client (1.0.1)
  - Locking psr/http-factory (1.0.1)
  - Locking psr/http-message (1.0.1)
  - Locking psr/log (3.0.0)
  - Locking psr/simple-cache (3.0.0)
  - Locking psy/psysh (v0.11.12)
  - Locking ralouphie/getallheaders (3.0.3)
  - Locking ramsey/collection (2.0.0)
  - Locking ramsey/uuid (4.7.3)
  - Locking sebastian/cli-parser (2.0.0)
  - Locking sebastian/code-unit (2.0.0)
  - Locking sebastian/code-unit-reverse-lookup (3.0.0)
  - Locking sebastian/comparator (5.0.0)
  - Locking sebastian/complexity (3.0.0)
  - Locking sebastian/diff (5.0.0)
  - Locking sebastian/environment (6.0.0)
  - Locking sebastian/exporter (5.0.0)
  - Locking sebastian/global-state (6.0.0)
  - Locking sebastian/lines-of-code (2.0.0)
  - Locking sebastian/object-enumerator (5.0.0)
  - Locking sebastian/object-reflector (3.0.0)
  - Locking sebastian/recursion-context (5.0.0)
  - Locking sebastian/type (4.0.0)
  - Locking sebastian/version (4.0.1)
  - Locking spatie/backtrace (1.4.0)
  - Locking spatie/flare-client-php (1.3.5)
  - Locking spatie/ignition (1.4.5)
  - Locking spatie/laravel-ignition (2.0.0)
  - Locking symfony/console (v6.2.7)
  - Locking symfony/css-selector (v6.2.7)
  - Locking symfony/deprecation-contracts (v3.2.1)
  - Locking symfony/error-handler (v6.2.7)
  - Locking symfony/event-dispatcher (v6.2.7)
  - Locking symfony/event-dispatcher-contracts (v3.2.1)
  - Locking symfony/finder (v6.2.7)
  - Locking symfony/http-foundation (v6.2.7)
  - Locking symfony/http-kernel (v6.2.7)
  - Locking symfony/mailer (v6.2.7)
  - Locking symfony/mime (v6.2.7)
  - Locking symfony/polyfill-ctype (v1.27.0)
  - Locking symfony/polyfill-intl-grapheme (v1.27.0)
  - Locking symfony/polyfill-intl-idn (v1.27.0)
  - Locking symfony/polyfill-intl-normalizer (v1.27.0)
  - Locking symfony/polyfill-mbstring (v1.27.0)
  - Locking symfony/polyfill-php72 (v1.27.0)
  - Locking symfony/polyfill-php80 (v1.27.0)
  - Locking symfony/polyfill-uuid (v1.27.0)
  - Locking symfony/process (v6.2.7)
  - Locking symfony/routing (v6.2.7)
  - Locking symfony/service-contracts (v3.2.1)
  - Locking symfony/string (v6.2.7)
  - Locking symfony/translation (v6.2.7)
  - Locking symfony/translation-contracts (v3.2.1)
  - Locking symfony/uid (v6.2.7)
  - Locking symfony/var-dumper (v6.2.7)
  - Locking symfony/yaml (v6.2.7)
  - Locking theseer/tokenizer (1.2.1)
  - Locking tijsverkoyen/css-to-inline-styles (2.2.6)
  - Locking vlucas/phpdotenv (v5.5.0)
  - Locking voku/portable-ascii (2.0.1)
  - Locking webmozart/assert (1.11.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 106 installs, 0 updates, 0 removals
  - Installing doctrine/inflector (2.0.6): Extracting archive
  - Installing doctrine/lexer (3.0.0): Extracting archive
  - Installing symfony/polyfill-ctype (v1.27.0): Extracting archive
  - Installing webmozart/assert (1.11.0): Extracting archive
  - Installing dragonmantank/cron-expression (v3.3.2): Extracting archive
  - Installing symfony/deprecation-contracts (v3.2.1): Extracting archive
  - Installing psr/container (2.0.2): Extracting archive
  - Installing fakerphp/faker (v1.21.0): Extracting archive
  - Installing symfony/polyfill-mbstring (v1.27.0): Extracting archive
  - Installing symfony/http-foundation (v6.2.7): Extracting archive
  - Installing fruitcake/php-cors (v1.2.0): Extracting archive
  - Installing psr/http-message (1.0.1): Extracting archive
  - Installing psr/http-client (1.0.1): Extracting archive
  - Installing ralouphie/getallheaders (3.0.3): Extracting archive
  - Installing psr/http-factory (1.0.1): Extracting archive
  - Installing guzzlehttp/psr7 (2.4.4): Extracting archive
  - Installing guzzlehttp/promises (1.5.2): Extracting archive
  - Installing guzzlehttp/guzzle (7.5.0): Extracting archive
  - Installing symfony/polyfill-php80 (v1.27.0): Extracting archive
  - Installing guzzlehttp/uri-template (v1.0.1): Extracting archive
  - Installing laravel/pint (v1.6.0): Extracting archive
  - Installing symfony/yaml (v6.2.7): Extracting archive
  - Installing voku/portable-ascii (2.0.1): Extracting archive
  - Installing phpoption/phpoption (1.9.1): Extracting archive
  - Installing graham-campbell/result-type (v1.1.1): Extracting archive
  - Installing vlucas/phpdotenv (v5.5.0): Extracting archive
  - Installing symfony/css-selector (v6.2.7): Extracting archive
  - Installing tijsverkoyen/css-to-inline-styles (2.2.6): Extracting archive
  - Installing symfony/var-dumper (v6.2.7): Extracting archive
  - Installing symfony/polyfill-uuid (v1.27.0): Extracting archive
  - Installing symfony/uid (v6.2.7): Extracting archive
  - Installing symfony/routing (v6.2.7): Extracting archive
  - Installing symfony/process (v6.2.7): Extracting archive
  - Installing symfony/polyfill-php72 (v1.27.0): Extracting archive
  - Installing symfony/polyfill-intl-normalizer (v1.27.0): Extracting archive
  - Installing symfony/polyfill-intl-idn (v1.27.0): Extracting archive
  - Installing symfony/mime (v6.2.7): Extracting archive
  - Installing symfony/service-contracts (v3.2.1): Extracting archive
  - Installing psr/event-dispatcher (1.0.0): Extracting archive
  - Installing symfony/event-dispatcher-contracts (v3.2.1): Extracting archive
  - Installing symfony/event-dispatcher (v6.2.7): Extracting archive
  - Installing psr/log (3.0.0): Extracting archive
  - Installing egulias/email-validator (4.0.1): Extracting archive
  - Installing symfony/mailer (v6.2.7): Extracting archive
  - Installing symfony/error-handler (v6.2.7): Extracting archive
  - Installing symfony/http-kernel (v6.2.7): Extracting archive
  - Installing symfony/finder (v6.2.7): Extracting archive
  - Installing symfony/polyfill-intl-grapheme (v1.27.0): Extracting archive
  - Installing symfony/string (v6.2.7): Extracting archive
  - Installing symfony/console (v6.2.7): Extracting archive
  - Installing ramsey/collection (2.0.0): Extracting archive
  - Installing brick/math (0.10.2): Extracting archive
  - Installing ramsey/uuid (4.7.3): Extracting archive
  - Installing psr/simple-cache (3.0.0): Extracting archive
  - Installing nunomaduro/termwind (v1.15.1): Extracting archive
  - Installing symfony/translation-contracts (v3.2.1): Extracting archive
  - Installing symfony/translation (v6.2.7): Extracting archive
  - Installing nesbot/carbon (2.66.0): Extracting archive
  - Installing monolog/monolog (3.3.1): Extracting archive
  - Installing league/mime-type-detection (1.11.0): Extracting archive
  - Installing league/flysystem (3.12.3): Extracting archive
  - Installing nette/utils (v4.0.0): Extracting archive
  - Installing nette/schema (v1.2.3): Extracting archive
  - Installing dflydev/dot-access-data (v3.0.2): Extracting archive
  - Installing league/config (v1.2.0): Extracting archive
  - Installing league/commonmark (2.3.9): Extracting archive
  - Installing laravel/serializable-closure (v1.3.0): Extracting archive
  - Installing laravel/framework (v10.3.3): Extracting archive
  - Installing laravel/sail (v1.21.2): Extracting archive
  - Installing laravel/sanctum (v3.2.1): Extracting archive
  - Installing nikic/php-parser (v4.15.4): Extracting archive
  - Installing psy/psysh (v0.11.12): Extracting archive
  - Installing laravel/tinker (v2.8.1): Extracting archive
  - Installing hamcrest/hamcrest-php (v2.0.1): Extracting archive
  - Installing mockery/mockery (1.5.1): Extracting archive
  - Installing filp/whoops (2.15.1): Extracting archive
  - Installing nunomaduro/collision (v7.1.0): Extracting archive
  - Installing sebastian/version (4.0.1): Extracting archive
  - Installing sebastian/type (4.0.0): Extracting archive
  - Installing sebastian/recursion-context (5.0.0): Extracting archive
  - Installing sebastian/object-reflector (3.0.0): Extracting archive
  - Installing sebastian/object-enumerator (5.0.0): Extracting archive
  - Installing sebastian/global-state (6.0.0): Extracting archive
  - Installing sebastian/exporter (5.0.0): Extracting archive
  - Installing sebastian/environment (6.0.0): Extracting archive
  - Installing sebastian/diff (5.0.0): Extracting archive
  - Installing sebastian/comparator (5.0.0): Extracting archive
  - Installing sebastian/code-unit (2.0.0): Extracting archive
  - Installing sebastian/cli-parser (2.0.0): Extracting archive
  - Installing phpunit/php-timer (6.0.0): Extracting archive
  - Installing phpunit/php-text-template (3.0.0): Extracting archive
  - Installing phpunit/php-invoker (4.0.0): Extracting archive
  - Installing phpunit/php-file-iterator (4.0.1): Extracting archive
  - Installing theseer/tokenizer (1.2.1): Extracting archive
  - Installing sebastian/lines-of-code (2.0.0): Extracting archive
  - Installing sebastian/complexity (3.0.0): Extracting archive
  - Installing sebastian/code-unit-reverse-lookup (3.0.0): Extracting archive
  - Installing phpunit/php-code-coverage (10.0.2): Extracting archive
  - Installing phar-io/version (3.2.1): Extracting archive
  - Installing phar-io/manifest (2.0.3): Extracting archive
  - Installing myclabs/deep-copy (1.11.1): Extracting archive
  - Installing phpunit/phpunit (10.0.16): Extracting archive
  - Installing spatie/backtrace (1.4.0): Extracting archive
  - Installing spatie/flare-client-php (1.3.5): Extracting archive
  - Installing spatie/ignition (1.4.5): Extracting archive
  - Installing spatie/laravel-ignition (2.0.0): Extracting archive
52 package suggestions were added by new dependencies, use `composer suggest` to see details.
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.  

  laravel/sail ................................................................................................................................ DONE
  laravel/sanctum ............................................................................................................................. DONE
  laravel/tinker .............................................................................................................................. DONE
  nesbot/carbon ............................................................................................................................... DONE
  nunomaduro/collision ........................................................................................................................ DONE
  nunomaduro/termwind ......................................................................................................................... DONE
  spatie/laravel-ignition ..................................................................................................................... DONE

80 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found
> @php artisan key:generate --ansi

   INFO  Application key set successfully.  

   INFO  Application ready! Build something amazing.

richard@home:/mnt/laravel$ cd my_app2
richard@home:/mnt/laravel/my_app2$ vite
failed to load config from /mnt/laravel/my_app2/vite.config.js
error when starting dev server:
Error: Cannot find module 'vite'
Require stack:
- /mnt/laravel/my_app2/vite.config.js
- /home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/mnt/laravel/my_app2/vite.config.js:35:19)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at _require.extensions.<computed> [as .js] (file:///home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62356:24)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
richard@home:/mnt/laravel/my_app2$ composer install
Installing dependencies from lock file (including require-dev)
Verifying lock file contents can be installed on current platform.
Nothing to install, update or remove
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.  

  laravel/sail ................................................................................................................................ DONE
  laravel/sanctum ............................................................................................................................. DONE
  laravel/tinker .............................................................................................................................. DONE
  nesbot/carbon ............................................................................................................................... DONE
  nunomaduro/collision ........................................................................................................................ DONE
  nunomaduro/termwind ......................................................................................................................... DONE
  spatie/laravel-ignition ..................................................................................................................... DONE

80 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
richard@home:/mnt/laravel/my_app2$ vite
failed to load config from /mnt/laravel/my_app2/vite.config.js
error when starting dev server:
Error: Cannot find module 'vite'
Require stack:
- /mnt/laravel/my_app2/vite.config.js
- /home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/mnt/laravel/my_app2/vite.config.js:35:19)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at _require.extensions.<computed> [as .js] (file:///home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62356:24)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
richard@home:/mnt/laravel/my_app2$ npm install
npm ERR! code 1
npm ERR! path /mnt/laravel/my_app2/node_modules/esbuild
npm ERR! command failed
npm ERR! command sh -c node install.js
npm ERR! node:internal/errors:490
npm ERR!     ErrorCaptureStackTrace(err);
npm ERR!     ^
npm ERR! 
npm ERR! <ref *1> Error: spawnSync /mnt/laravel/my_app2/node_modules/esbuild/bin/esbuild EACCES
npm ERR!     at Object.spawnSync (node:internal/child_process:1110:20)
npm ERR!     at spawnSync (node:child_process:871:24)
npm ERR!     at Object.execFileSync (node:child_process:914:15)
npm ERR!     at validateBinaryVersion (/mnt/laravel/my_app2/node_modules/esbuild/install.js:96:28)
npm ERR!     at /mnt/laravel/my_app2/node_modules/esbuild/install.js:283:5 {
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'spawnSync /mnt/laravel/my_app2/node_modules/esbuild/bin/esbuild',
npm ERR!   path: '/mnt/laravel/my_app2/node_modules/esbuild/bin/esbuild',
npm ERR!   spawnargs: [ '--version' ],
npm ERR!   error: [Circular *1],
npm ERR!   status: null,
npm ERR!   signal: null,
npm ERR!   output: null,
npm ERR!   pid: 0,
npm ERR!   stdout: null,
npm ERR!   stderr: null
npm ERR! }
npm ERR! 
npm ERR! Node.js v18.14.2

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/richard/.npm/_logs/2023-03-13T09_25_05_848Z-debug-0.log
richard@home:/mnt/laravel/my_app2$ rpm run dev
Command 'rpm' not found, but can be installed with:
sudo apt install rpm
richard@home:/mnt/laravel/my_app2$ npm run dev

> dev
> vite

failed to load config from /mnt/laravel/my_app2/vite.config.js
error when starting dev server:
Error: Cannot find module 'vite'
Require stack:
- /mnt/laravel/my_app2/vite.config.js
- /home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/mnt/laravel/my_app2/vite.config.js:35:19)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at _require.extensions.<computed> [as .js] (file:///home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62356:24)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
richard@home:/mnt/laravel/my_app2$ npm run build

> build
> vite build

failed to load config from /mnt/laravel/my_app2/vite.config.js
error during build:
Error: Cannot find module 'vite'
Require stack:
- /mnt/laravel/my_app2/vite.config.js
- /home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15)
    at Module._load (node:internal/modules/cjs/loader:920:27)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (/mnt/laravel/my_app2/vite.config.js:35:19)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)
    at _require.extensions.<computed> [as .js] (file:///home/richard/.nvm/versions/node/v18.14.2/lib/node_modules/vite/dist/node/chunks/dep-ca21228b.js:62356:24)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
richard@home:/mnt/laravel/my_app2$ cat vite.config.js 
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});
richard@home:/mnt/laravel/my_app2$ cat package.json 
{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "vite": "^4.0.0"
    }
}
richard@home:/mnt/laravel/my_app2$ cat composer.json 
{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^10.0",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^7.0",
        "phpunit/phpunit": "^10.0",
        "spatie/laravel-ignition": "^2.0"
    },
    "autoload": {
        "psr-4": {
            "App\": "app/",
            "Database\Factories\": "database/factories/",
            "Database\Seeders\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\Foundation\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true,
            "php-http/discovery": true
        }
    },
    "minimum-stability": "stable",
    "prefer-stable": true
}
richard@home:/mnt/laravel/my_app2$
eventlistener's avatar

I think I have partly figured this out. It has something to do with permissions, although this is not your regular Linux permissions. I hope someone can explain the reason behind it.

The reason why "npm install" does not work, is because my app is located in the /mnt directory like so:

# Cannot run npm from this directory:
~$ ls -ld /mnt/laravel/my_app/
drwxr-xr-x 13 richard richard  4096 Mar 13 17:56 /mnt/laravel/my_app/
~$

However, everything works fine when I install the app in my home directory like so:

# No problem when running npm from this directory:
~$ ls -ld /home/richard/my_app/
drwxr-xr-x 13 richard richard  4096 Mar 13 17:56 /home/richard/my_app/
~$

I even tried to give the highest permissions to the top level /mnt directory, like so:

# Still cannot run npm with these extreme permission settings:
~$ sudo chown  -R  richard:richard   /mnt/
~$ sudo chmod -R  777  /mnt/

But npm keeps giving errors when the app is located in the /mnt/laravel/my_app/ directory. This NPM error undoubtedly has something to do with permissions, because the error contains the word "EACCES".

In both directories I can create files and directories without any problems. Laravel also installs the new project without any problems. So there should not be any issues with permissions. Why can't I use npm in the directory /mnt/laravel/my_app/ ?

Please or to participate in this conversation.