[Vite] Refresh paths for livewire

[fabpl]

Last commit called "add livewire component paths to default refresh paths for livewire" caused error : TypeError: import_laravel_vite_plugin.refreshPaths is not iterable

see : https://github.com/laravel/jetstream/runs/7282953372?check_suite_focus=true

[timacdonald]

This is expected as it relies on laravel/laravel to be tagged. Both Jetstream and the skeleton will be tagged at the same time and it will then all line up.

[SturmB]

I just tried to install Jetstream on a new Laravel project and ran into this error on the last step, npm run build.

If I am unable to run the build script, then how am I supposed to build my app?

What can I do to use Jetstream with my app?

[timacdonald]

Please ensure you are on the latest version:

npm install -D laravel-vite-plugin@^0.5

I am unable to reproduce the above error with the following:

composer create-project laravel/laravel vite-test \                  
  && cd vite-test \                  
  && composer require laravel/jetstream \
  && php artisan jetstream:install livewire \                                 
  && npm install
  && npm run build

If you are still receiving the error, can you please provide the steps required to make it occur and I'll take a look.

[SturmB]

Please ensure you are on the latest version:

Ah, I was on an older version. Specifically, ^0.2.4. I only created this project a few weeks ago; I guess the versions have changed considerably since then. ¯_(ツ)_/¯ In any case, it does appear to work now that I've upgraded it to ^0.5.

Thank you very much, @timacdonald, for the quick and informative response. I greatly appreciate it!

[timacdonald]

No trouble. Glad to hear you got things back on track!

[kmaphane]

Hi, @timacdonald My livewire component is not refreshing as I'm used to. the polling is not working either using Laravel Jetstream Livewire and Vite.

Composer file as below.

{ "name": "laravel/laravel", "type": "project", "description": "The Laravel Framework.", "keywords": [ "framework", "laravel" ], "license": "MIT", "require": { "php": "^8.0.2", "cknow/laravel-money": "^7.0", "guzzlehttp/guzzle": "^7.2", "laravel/framework": "^9.19", "laravel/jetstream": "^2.10", "laravel/sanctum": "^3.0", "laravel/tinker": "^2.7", "livewire/livewire": "^2.5", "staudenmeir/laravel-adjacency-list": "^1.0" }, "require-dev": { "barryvdh/laravel-debugbar": "^3.7", "fakerphp/faker": "^1.9.1", "laravel/pint": "^1.0", "laravel/sail": "^1.0.1", "mockery/mockery": "^1.4.4", "nunomaduro/collision": "^6.1", "phpunit/phpunit": "^9.5.10", "spatie/laravel-ignition": "^1.0" }, "autoload": { "psr-4": { "App\": "app/", "Database\Factories\": "database/factories/", "Database\Seeders\": "database/seeders/" } },

package.json file as below:

"scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@defstudio/vite-livewire-plugin": "^0.2.4", "@tailwindcss/forms": "^0.5.2", "@tailwindcss/typography": "^0.5.0", "alpinejs": "^3.0.6", "autoprefixer": "^10.4.7", "axios": "^0.27", "laravel-vite-plugin": "^0.5.3", "lodash": "^4.17.19", "postcss": "^8.4.14", "prettier": "^2.7.1", "prettier-plugin-tailwindcss": "^0.1.13", "tailwindcss": "^3.1.0", "vite": "^3.0.0" }

livewire component:

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ProductVariationDropdown extends Component { public $variations;

public $selectedVariation = '';

public function updatedSelectedVariation()
{
    dd('changed');
}

public function render()
{
    return view('livewire.product-variation-dropdown');
}

}

blade component:

{{ Str::title($variations->first()?->type) }}

Choose an option @foreach ($variations as $variation ) {{ Str::title($variation->title) }} @endforeach

Current time: {{ now() }}

vite.config.js

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/**"], }), ], });

I have tried a host of approaches including trying to set up the following package:

npm install --save-dev @defstudio/vite-livewire-plugin;

I reverted back to the original jetstream settings after the plugin failed.

Nothing seems to work and I am just stuck. Any direction will help, I hope I have provided you with enough information to assist.

[kmaphane]

Hi, @timacdonald My livewire component is not refreshing as I'm used to. the polling is not working either using Laravel Jetstream Livewire and Vite.

Composer file as below.

{ "name": "laravel/laravel", "type": "project", "description": "The Laravel Framework.", "keywords": [ "framework", "laravel" ], "license": "MIT", "require": { "php": "^8.0.2", "cknow/laravel-money": "^7.0", "guzzlehttp/guzzle": "^7.2", "laravel/framework": "^9.19", "laravel/jetstream": "^2.10", "laravel/sanctum": "^3.0", "laravel/tinker": "^2.7", "livewire/livewire": "^2.5", "staudenmeir/laravel-adjacency-list": "^1.0" }, "require-dev": { "barryvdh/laravel-debugbar": "^3.7", "fakerphp/faker": "^1.9.1", "laravel/pint": "^1.0", "laravel/sail": "^1.0.1", "mockery/mockery": "^1.4.4", "nunomaduro/collision": "^6.1", "phpunit/phpunit": "^9.5.10", "spatie/laravel-ignition": "^1.0" }, "autoload": { "psr-4": { "App\": "app/", "Database\Factories\": "database/factories/", "Database\Seeders\": "database/seeders/" } },

package.json file as below:

"scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@defstudio/vite-livewire-plugin": "^0.2.4", "@tailwindcss/forms": "^0.5.2", "@tailwindcss/typography": "^0.5.0", "alpinejs": "^3.0.6", "autoprefixer": "^10.4.7", "axios": "^0.27", "laravel-vite-plugin": "^0.5.3", "lodash": "^4.17.19", "postcss": "^8.4.14", "prettier": "^2.7.1", "prettier-plugin-tailwindcss": "^0.1.13", "tailwindcss": "^3.1.0", "vite": "^3.0.0" }

livewire component:

{{ Str::title($variations->first()?->type) }} Choose an option @foreach ($variations as $variation ) {{ Str::title($variation->title) }} @Endforeach Current time: {{ now() }} vite.config.js 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/**"], }), ], }); I have tried a host of approaches including trying to set up the following package: npm install --save-dev @defstudio/vite-livewire-plugin; I reverted back to the original jetstream settings after the plugin failed. Nothing seems to work and I am just stuck. Any direction will help, I hope I have provided you with enough information to assist.

Sorry, my bad. Rookie mistake by me!! Created a new layout and forgot to add livewire scripts. So happy I did not start a fresh issue. Could have got embarrassing.

[timacdonald]

haha. nah, all good. We've all been there - glad you got it sorted!