Level 102
Check the browser console for errors and make sure that npm run dev creates a file named "hot" in the public directory
1 like
Jul 7, 2022
26
Level 12
No hot reload with new laravel vite
Hi. I started to use vite. After an hour of testing I got it working, that the files will be loaded. I use homestead so I had to set server ip in the vite.config.js:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
server: {
host: '192.168.56.56',
},
});
Now I have another problem. Everytime I change something in my css, the updates are not show in my browser. Also not, if i reload the page. I have to exit the 'npm run dev' process and start the process again. Is my setting with server correct? And what else do I have to do? Have anybody an idea? Thx.
Level 12
Console says "Vite connecting" and then "Vite connected". There is also now a hot file in public folder with this as value: http://192.168.56.56:3000
Is this maybe the problem? I use as domain starter.test as domain. I now also changed my vite.config.js to:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
server: {
host: 'starter.test'
},
});
The hot file now has also http://starter.test:3000 as value. But it seems that maybe the port is the problem? But when i add it to my homestead.yaml I get an error did not find expected '-' indicator while parsing a block collection at line 42 column.
Or do I have another problem?
1 like
Level 102
@Pixelairport sounds pretty much correct,but I don't use homestead myself. Did you run the command inside homestead? Does the commandline react when you change anything?
1 like
Level 12
@Sinnbeck thx for your answer. Commandline does not react... thats why i think maybe the thing with the port is wrong. Yes i do it all in homestead... I will check it tomorrow. Maybe i find another idea.
1 like
Level 102
@Pixelairport I think you should see some some of reaction in the console. Are you sure you have the correct paths for your files?
1 like
Level 12
It works now :) I found another similar problem with vite and homestead and saw the line with: usePolling: true,:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
server: {
host: '192.168.56.56',
watch: {
usePolling: true,
},
},
});
If somebody else have the problem with a new installed laravel, maybe this helps. @sinnbeck thx for your support.
ps: And if you use also scss then do npm install --save-dev sass and you can use the file paths to your scss files in the @vite directive.
8 likes
Level 12
@Pixelairport had same problem here as well. (just my vagrant ip is different)
works fine :)
2 likes
Level 2
@Pixelairport Finally, usePolling fixed it! Thank you!
2 likes
Level 1
@Pixelairport it is work, thanks!
1 like
Level 8
@Pixelairport Thank you, it seems as though usePolling is the answer.
One thing I noticed, which I thought I'd post here just in case it's of help figuring out why usePolling is working, is that if you do an vagrant ssh and then edit a file directly using nano or whatever, vite seems to pick up the changes and refresh immediately, even without usePolling being enabled.
So it seems as though the issue is more likely to be something to do with the way files are saved through the network share (which vite doesn't notice) vs how they're saved on the actual host which vite notices immediately.
I suppose usePolling is checking the network share for changes periodically which would also explain why it can seem a little sluggish sometimes.
1 like
Level 22
Yes, that usePolling also fixed it for me, thanks!
3 likes
Level 1
This should work.
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
]
}),
{
name: 'blade',
handleHotUpdate({ file, server }) {
if (file.endsWith('.blade.php')) {
server.ws.send({
type: 'full-reload',
path: '*',
});
}
},
}
],
});
1 like
Level 2
Just started a new Laravel project (v9.25.1)
Suppose you have created a URL starter.test in Homestead.
All you need to do is:
- Add
APP_URL=http://starter.test/to the.envfile - Add
@vite(['resources/css/app.css', 'resources/js/app.js'])inside the head tag on each blade file/template (e.g. onwelcome.blade.php)
Now you have hot reload on http://starter.test/
welcome.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
...
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
vite.config.js (this is just the default code in v9.25.1)
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/**',
],
}),
],
});
6 likes
Level 1
@pverhaert great answer, but am I missing something?
Tried all those steps but I get this error:
TypeError: import_laravel_vite_plugin.refreshPaths is not iterable
I tried to avoid importing refreshPaths and just set them by myself
refresh: [
'routes/**',
'resources/views/**',
'app/Http/Livewire/**',
]
But hot reload still not working.
I'm on Laravel v9.26.1, any ideas?
1 like
Level 2
@DanielTamargo i am using PHP 8.1. Could that be the problem?
1 like
Level 2
@DanielTamargo
Problem found.
I installed Laravel with Jetstream (Livewire) and it modified my vite.config.js.
Just did a complete fresh installation (v 9.27.0).
In vite.config.js you don't have to change anything at all.
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,
}),
],
});
Just add @vite(...) to the blade files and hot reload works with npm run dev
<head>
...
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
7 likes
Level 1
@pverhaert refreshPaths from the laravel vite worked for me. I've been struggling with this for 5 hours now and it finally worked. I had my laravel project inside a folder in the parent directory and for some reason any update on a file at my back/resources/js would be hot reloaded
1 like
Level 12
@pverhaert , I added this inside the head tag as you instructed, and worked! put that in the Layout or html
<head>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
then npm run dev in the console
if you are installing Jet Stream the problem is that the layouts are ready to work, but the WELCOME page is not calling any layout, and that brings the VITE, so that also is confusing, so you got to add it manually to the welcome.blade.php
thank you!
1 like
Level 1
@pverhaert 1 year later and this is still relevant. Thank you!
I don't know why this works but It does, If someone know, enlighten me. Thanks again!
1 like
Level 1
finally got it. (laravel 9 version)
-
modify the vite.config.js import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import fs from 'fs'; const host = 'laravel.test';
export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), { name: 'blade', handleHotUpdate({ file, server }) { if (file.endsWith('.blade.php')) { server.ws.send({ type: 'full-reload', path: '*', }); } }, } ], server: { host, hmr: { host }, https: { key: fs.readFileSync('/Users/dd/.config/valet/Certificates/laravel.test.key'), cert: fs.readFileSync('/Users/dd/.config/valet/Certificates/laravel.test.crt'), }, watch: { usePolling: true, }, }, });
-
.env file modify APP_URL
-
go to blade file add @vite(['resources/css/app.css', 'resources/js/app.js']) to header tag
done.
1 like
Level 5
For me it seems that vite can only see files that are one layer deep. I tried modifying the Dashboard.jsx file in the pages directory and found no hot reload, but if I instead make a component that isn't in the pages directory I can hot reload this component and just reference it from the Dashboard.jsx file.
1 like
Level 34
I had the same problem until I yarn install and yarn run dev and with the vite.config.js of default all start hot reloading perfectly
2 likes
Level 3
I found that hot reloading works with the default Vite configuration, but you need to save the file manually with Cmd+S or wait for some idle time. There is also an option to automatically save files after a specified idle time, but it seems to work incorrectly. For instance, I have it set to 1 second, but I end up waiting for more than 10 seconds for the file to save automatically.
It seems that problem is in calculating the idle time in PhpStorm.
1 like
Level 1
For anyone running into these problems, recently started using Laravel Herd with DBngin and TablePlus and it's been working SO well.. used to have all kinds of hot reload issues and problems with keeping the environment stable and solid, but this combo is a holy grail for me.
1 like
Level 1
I had this same issue, and I had to remove a comma, believe it or not. For some reason where it says "refresh: true" I noticed an extra comma. It was weird. Well once I removed the extra comma hot reload was able to work.
2 likes
Level 1
To make hot reload work. You should call renderHook method from Panel object in AppPanelProvider.php
More in docs: https://filamentphp.com/docs/3.x/panels/configuration#render-hooks
->renderHook(
PanelsRenderHook::HEAD_START,
fn(): string => Blade::render("@vite('resources/js/app.js')"),
);
2 likes
Please or to participate in this conversation.