Vite always reloading files on page with "x-select"

[LaMance22]

Hello, i have problem.

When I add the "<x-select" option to my blade (in livewire), vite reloads all of them. Using "<x-native-select" everything works fine.

My composer.json.

    "require": {
        "php": "^8.0.2",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^9.19",
        "laravel/jetstream": "^2.10",
        "laravel/sanctum": "^2.14.1",
        "laravel/tinker": "^2.7",
        "livewire/livewire": "^2.5",
        "power-components/livewire-powergrid": "^3.2",
        "psr/simple-cache": "1.0",
        "wireui/wireui": "^1.13"
    },

Thanks for working on this project - good job.

[PH7-Jack]

@LaMance22 Could you share your vite config?

[LaMance22]

Sure,

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

@Update With "<x-datetime-picker" is the same problem.

[PH7-Jack]

@LaMance22 Your config likes normal for me. I don't know what is causing this bug. I can use the wireui with vite. Try updating the dependencies

[LaMance22]

I did not add the most important point. Everything works fine after executing "npm run build", but if it works on the "npm run dev" environment, vite will reload the page every time if it is "<x-datetime-picker", "<x-select". It does not require urgent repair, but I do report it.

[PH7-Jack]

Could you record a video showing this behavior?

[racerguy]

I am also having this problem. Seems to come up with x-selects in WireUI modals for me.

[racerguy]

Could you record a video showing this behavior?

[PH7-Jack]

@racerguy Could you share your vite config? Could you record a video on loom? I cant reproduce this behavior

[racerguy]

I will try to get a video of it. It tends to cause a meltdown of vite and crashes chrome and node.

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

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

[racerguy]

I think it maybe looping because some function from wire-elements is also found in wireui

[racerguy]

It's an error with the laravel vite auto refresh, using https://github.com/def-studio/vite-livewire-plugin gives me no problems

[PH7-Jack]

@racerguy Nice finding. Interesting plugin

[PH7-Jack]

I believe it can be closed since it's not a wireui issue. If I'm wrong, just tag me to reopen the issue

[racerguy]

@PH7-Jack Still having problems with this. Plugin seemed to help and so did using incognito window for about a day. Something weird is going on. I have 4 selects, 1 date input, 3 text inputs loading on a modal.

I am on WSL using sail

[racerguy]

Is there any possibility that wireui is modifying files in a way that Vite is picking it up as a change?

[PH7-Jack]

@racerguy As I said before, record a video that shows your problem, I cant reproduce it. I can also use wireui with vite with no problem, the wireui scripts don't need to use the vite build, they are a build. Try to update your vite config https://github.com/laravel/jetstream/blob/2.x/stubs/livewire/vite.config.js I believe the vite is listening for the laravel blade cache

[minhtamwebmaster]

I did not add the most important point. Everything works fine after executing "npm run build", but if it works on the "npm run dev" environment, vite will reload the page every time if it is "<x-datetime-picker", "<x-select". It does not require urgent repair, but I do report it.

I also encountered a similar problem