topsenso's avatar

Laravel 9 (with Sail, Vite, Inertia and Vue ) - HMR not working?

Hi everyone,

I've been a Laracast member for about 4 years and since then I've been able to solve all my problems by reading here on the forum. First of all thank you for that.

But now I have to ask a first question and I hope you can help me. This week I started a new project based on Laravel 9. My intention is to use Inertia with Vue.js, as well as Vite, which is obviously standard in laravel by now. I hope I can make you understand my problem by describing it as best i can. (Excuse my bumpy English, and Sorry for the long Text)

That’s what I have done to test the behavior: First i set up a complete new Laravel-App as follows:

curl -s "https://laravel.build/laraTest" | bash
cd laraTest
sail up -d
sail composer require laravel/jetstream 
sail artisan jetstream:install inertia
sail artisan migrate

As you see, i have done nothing special and i have especially not changed anything.

Now i start Vite: sail npm run dev -> it starts and shows:

VITE v3.0.9  ready in 2564 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://172.19.0.7:5173/

  LARAVEL v9.25.1  plugin v0.5.4

  ➜  APP_URL: http://laraTest.test

So far, so good. The Link http://laraTest.test does not work (which i think is correct, as i use Sail). The Link http://localhost:5173 shows a Vite Page with Infos (which i think you know)

Next i open http://localhost in Browser (Chrome) and the Laravel Welcome Page appears as expected. Perfect!

Now i change some Text in „Welcome.vue“ in resources/js/Pages Directory (e.g. change Documentation -> HELLO).

The Change is unfortunately not reflected in the Browser, even not if i force the reload of the Page. If i stop Vite (CTRL+c) and restart it (npm run dev) then the change ist reflected. But this is realy boring.

If i change the app.blade.php in resouces/views (e.g. put a HELLO in the body (before @inertia), this change is reflected in Browser, but only if I force to reload.

So I assume that HMR is not working with Vue-Files in a vanilla Laravel-Installation with Sail Inertia and Vue? Maybe something in the Configuration is wrong, but I do not know where. I tried to find it out for myself, spent many hours and tried each Tipp i found, but no success so far. What am I doing wrong?

In case it matters, I'm working on a Macbook Pro (Monterey) with Intellij IDEA Ultimate.

Many thanks in advance for your support

Reinhard

0 likes
23 replies
Sinnbeck's avatar

Ok let's have a look. First check the browser console for errors. Also check the head tag if that new url is shown twice with different urls in script tags

topsenso's avatar

@Sinnbeck

Thanks for your reply. I'm not really sure i understand your question, but i hope so.

I tried again and there is no error shown in the browser console. Only one Problem ist shown:

*Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform
    * 	A page or script is accessing at least one of navigator.userAgent, navigator.appVersion, and navigator.platform. Starting in Chrome 101, the amount of information available in the User Agent string will be reduced.


But i think this is not the problem here.

These are the url’s shown in the head tag:

<script type="module" src="http://0.0.0.0:5173/@vite/client"></script>
<script type="module" src="http://0.0.0.0:5173/resources/js/app.js"></script

So i'm still confused. Again, for your understanding, I haven't changed anything from the default installation. So, i guess, this behavior should be the same everywhere. Or is it just me?

Thanks for your help so far.

Reinhard

exlo's avatar

@topsenso I have the exact same problem. I use also Laravel 9 with Vite, Jetstream Inertia, and Vue. Also a completely fresh installation.

topsenso's avatar

@exlo Thank you, that helps me a lot. So at least it doesn't seem to be a local problem on my computer. I was already beginning to doubt myself.

Speedy Gonzales's avatar

@exlo I had exactly the same problem. In my case I could solve it. Maybe my solution can help others too. I am working on a Macbook M1, sail (docker), vite, inertia, vuejs.

It turned out the problem was case sensitive filenames.

In my case in "resources/js/app.js" the path to my pages directory was set to "./Pages/...", with a capital "P", while the physical directory on disk was named "./pages/" with a lowercase "p".

So for VITE to rebuild the pages, case sensitivity is important, but for serving pages to your browser it does not matter which case the pages are.

exlo's avatar

Ok, it works on my project. I created another new project and merge both together. I removed some packages and now it works. I don't really know what fixed the problem but I removed vuetify and bootstrap. It seems that bootstrap make some problems. I also removed this line in the boostrap.js file:

import 'bootstrap';

Maybe it helps.

topsenso's avatar

@exlo Thank for your feedback. I tried to do the same. Created a new project (i think i've done it 20 times in the last few days). Vuetify is not part of a standard laravel project, so i can't remove it. I removed the line import './bootstrap'; from app.js and the file bootstrap.js from the path. Nothing changed. Same as before, all works fine, but HRM is still not working. :-( Thanks anyway, my search continues......

topsenso's avatar

Maybe this helps someone who has the same problem:

In the meantime I found that the error doesn't appear when I edit with VS Code or Sublime. So it looks like Intellij IDEA Ultimate is responsible. Can anyone confirm this and does anyone have a solution?

Best regards Reinhard

mahdi29's avatar

@topsenso I have the same problem but with VS Code, It was working initially but then suddenly stopped working after I ran npm update command. Not sure what's the issue here.

topsenso's avatar

@mahdi29 I did the same though I cannot observe this behavior in VS Code.

But what I find is that it happens again and again (even in VS Code) that HMR doesn't work. The only thing that helps me is to restart Docker completely or the whole computer. It definitely never works with IntelliJ. I haven't found a solution yet and apparently hardly anyone has a similar constellation or similar problems.

Unfortunately I can't say more.

salfel's avatar

@topsenso for the people that have the same issue with jetbrains ide's you just have to set autosave on your ide to somewhat seconds in order to make it work

stavenger's avatar

I'm having the same proble. Fresh Laravel 9 + Jetstream + Inertia install. Tested it on both Sail and Homesetad (Windows 10 for both.) Try it with server.hmr.host vite config. Try it with vite --host Try PHPStorm, VSCode, Sublime, vim and nothing. I cannot get it to hotreload.

kiri1101's avatar

Hi guys, I running Laravel 9 + Inertia + Vue on laragon and have no issues. Will try out Sail and forward any feedbacks i get here

stavenger's avatar

Yes, when you run it "local" it works. The only problem I have is when using Homestead or Sail (Docker).

pebblesmax's avatar

Hi all, I think that the problem is that vite needs to be watching the files for changes. If you start sail in the background with

sail up -d

you can then start the vite watcher with

npm run dev

I'm not sure if docker is supposed to start this watcher automatically and that broke or something but this works for me to get it working for now! Would love to hear from anyone with more knowledge on the docker side of things if this is a config issue that can be fixed easily.

dxc04's avatar

I think the fix is to clear the routes. php artisan route:clear

1 like
fnagel's avatar

Using Laravel v10.43.0 with Vite v5.0.12 with and Laravel plugin v1.0.1 and still running into this problem.

Any news on this issue?

dilidonas's avatar

Also having the exact same issue. Tried many solutions posted online, but none worked. Any news on this issue would be greatly appreciated.

Update: After some investigation, I have successfully resolved the issue. It appears that the root cause lied within the vite.config.js file. Specifically, the problem was resolved by removing the refresh: true line within the Laravel plugin section. After that, the HMR functionality began working seamlessly. Below is the updated configuration of my vite.config.js file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ]
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        })
    ],
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            host: 'localhost'
        }
    }
});
1 like
Letux's avatar

@dilidonas Nope. It does not work for me. But as a quick hack, I can execute

./vendor/bin/sail npm run dev.

It starts a new Vite service inside a docker container and it works. Weird, but it works. If I stop it by Ctrl + C I see the old error. They are not even conflicting...

geneowak's avatar

@dilidonas Thanks, that worked for me. Removing the refresh:true was the last piece to make it work, thanks.

nyce's avatar

I tried every solution proposed on this thread, but nothing worked for me.

Specifically, the problem appears not to be that HMR isn't detecting changes: I can see in the console (where I run npm run dev) that the hot-loading is being detected by vite. The problem looks to be with the browser, which doesn't detect the hot-loading has changed. There is nothing in the browser's console to indicate that additional page loads are being attempted. But when I force the browser to re-load the paged, the changes from the vue-component are detected.

I'm really frustrated by this, because I know my solution was working a couple of months ago.

Please or to participate in this conversation.