How do I install laravel jetstream with the official documentation?

I seem to not be able to just make things work with jetstream. I have installed using both livewire and inertia option i keep on getting an error regarding vite when trying to npm build npm run build

> build
> vite build

failed to load config from **APP_ROOT**\\vite.config.js
error during build:
TypeError: import_laravel_vite_plugin.refreshPaths is not iterable
    at Object.<anonymous> (**APP_ROOT**\\vite.config.js:41:39)
    at Module._compile (node:internal/modules/cjs/loader:1126:14)
    at Object._require.extensions.<computed> [as .js] (file:///**APP_ROOT**/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63524:24)
    at Module.load (node:internal/modules/cjs/loader:1004:32)
    at Function.Module._load (node:internal/modules/cjs/loader:839:12)
    at Module.require (node:internal/modules/cjs/loader:1028:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at loadConfigFromBundledFile (file:///**APP_ROOT**/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63532:21)
    at loadConfigFromFile (file:///**APP_ROOT**/node_modules/vite/dist/node/chunks/dep-db16f19c.js:63400:34)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

After several attempts now i cant even npm install without errors as i get the following errors:

npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]        
npm ERR! Found: [email protected]
npm ERR! node_modules/vite
npm ERR!   dev vite@"^3.1.6" from the root project
npm ERR!   peer vite@"^3.0.0" from @vitejs/[email protected]
npm ERR!   node_modules/@vitejs/plugin-vue
npm ERR!     dev @vitejs/plugin-vue@"^3.0.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^2.9.9" from [email protected]
npm ERR! node_modules/laravel-vite-plugin
npm ERR!   dev laravel-vite-plugin@"^0.2.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vite
npm ERR!   peer vite@"^2.9.9" from [email protected]
npm ERR!   node_modules/laravel-vite-plugin
npm ERR!     dev laravel-vite-plugin@"^0.2.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See C:\Users\Warren Arnold\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Warren Arnold\AppData\Local\npm-cache\_logs\2022-10-06T19_47_43_871Z-debug-0.log

The following forms my vite.config:

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

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

the following is my package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build",
        "test": "jest",
        "jest": "jest --coverage"
    },
    "devDependencies": {
        "@babel/preset-typescript": "^7.18.6",
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "@types/express-list-endpoints": "^6.0.0",
        "@types/jest": "^29.0.0",
        "@vitejs/plugin-vue": "^3.0.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^0.25",
        "date-fns": "^2.28.0",
        "express": "^4.18.1",
        "laravel-vite-plugin": "^0.2.1",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "save-dev": "^0.0.1-security",
        "tailwindcss": "^3.1.0",
        "ts-jest": "^28.0.8",
        "ts-node": "^10.9.1",
        "typescript": "^4.7.4",
        "vite": "^3.1.6",
        "vue": "^3.2.31"
    },
    "dependencies": {
        "@babel/preset-env": "^7.18.10",
        "@types/express": "^4.17.13",
        "@types/morgan": "^1.9.3",
        "@types/node-fetch": "^2.6.2",
        "babel-jest": "^28.1.3",
        "caller-id": "^0.1.0",
        "dotenv": "^16.0.2",
        "express-list-endpoints": "^6.0.0",
        "jest": "^28.1.3",
        "morgan": "^1.10.0",
        "node-fetch": "^2.6.7",
        "nodemon": "^2.0.19",
        "nyc": "^15.1.0",
        "pg": "^8.8.0",
        "sequelize": "^6.21.4"
    }
}

I am on node 16.17, laravel 9.19.

The error seems to stem from fact that laravel uses vite 2 while current vite is 3 and yet seems jetstream just installs latest dependencies without considering such. Hence you have to manually try out versions that play well with each other. Currently what worked for me is:

    "@vitejs/plugin-vue": "^2.3.3",
    "laravel-vite-plugin": "^0.2.1",
    "vite": "^2.9.11",
    "vue": "^3.2.31"
    "tailwindcss": "^3.1.0",

it seems the laravel-vite-plugin are laravel-vite-plugin dependencies are the most conflicting.

To make the changes you can edit the package.json and run npm install or npm install the specific packages specifying the version get installation the link from npm for correct format.

This held me down for quite some hours. Thing is not even about node as above answer as myself was on 16.17, though check on that too, upgrading node ended up in up in more problems about openssl because i had postgres installed too which adds the config in path. I did not want to touch that. After fidgeting around creating separate project and installing breeze separately i caught the error.

I got a hint of whats going on from this tweet from Povilas of Laravel daily after hours of scouring the internet.

This question is similar to mine if am not wrong:

check it out

Recommended topics

Hot tags