Level 2
Facing the same error. Did you find any solution @peterf
Jul 10, 2022
8
Level 6
GET /__vite_ping 404
Hi All. I have a webpage, that has a livewire component, that is using Laravel Echo to get events from a job fired off to load a csv file. As you can imagine, it's about 10 separate files and reasonably complex, complex enough that I don't want to paste 10 different files here. Somewhere along the line, I have gotten something in a loop, stuck, and so my telescope page is filling with GET /__vite_ping 404 failures, every second. I have the npm run dev running to process my vite... I also have a queue worker running to process my JObs as they are submitted, and I have a websockets server running to handle my Broadcast events.... so there are a lot of places for this to go wrong.... according to the referral headers on the request, its coming from the original request that goes to a three line Controller method which merely, dispatch's the job.... I have tried restarting all the bits, but dont understand where this is coming from..... just wondering if anyone else has seen this kind of orphaned vite thing before..... there was an issue on github that was closed a while ago saying there was just a dangling client somewhere... but I would really love to know why its happening so I can make sure it doesnt happen again.... all pointers welcome... thanks
Level 6
Sadly no. It did go away though. I suspect it was something to do with a worker thread that had a job that threw an exception that I didnt handle... but I dont actually know.....
Level 2
Checkout the server section in your vite.config.js file. In my case I needed to change host from localhost to 127.0.0.1. The https value is important too.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
server: {
https: false,
host: '127.0.0.1',
port: 8000,
},
1 like
Level 67
Just noting here - this was happening for me when using Laravel Valet + Vite + Https/Secure locally. I could not figure out how to get rid of this 404 and it was causing HMR not to work. I had to run valet unsecure on my project and switch the .env APP_URL=http:// instead of https.
Level 15
@fylzero if you're using Valet and Vite update to at least v0.6.1 of the laravel-vite-plugin, which came with a way to automatically serve Vite with TLS using the certificate Valet generates. The documentation now also comes with a section on working with a secure development server. 👍
1 like
Level 67
@thinkverse Thank you! I didn't even realize these deps were out of date - I updated to Vite 3x and laravel-vite-plugin v0.7.0... now HMR is not working - though this error went away.
Now I see:
[vite] failed to connect to websocket.
your current setup:
(browser) localhost:5173/ <--[HTTP]--> localhost:5173/ (server)
(browser) localhost:5173/ <--[WebSocket (failing)]--> localhost:5173/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr .
This article solved the remainder of my issue.
My vite.config.js
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'
const domain = 'myprojectname.test'
const homedir = require('os').homedir()
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
server: {
https: {
key: `${homedir}/.config/valet/Certificates/${domain}.key`,
cert: `${homedir}/.config/valet/Certificates/${domain}.crt`,
},
host: domain,
hmr: {
host: domain,
},
},
})
Level 15
@fylzero Are you still using Valet? In that case, you don't need to manually add the cert. Tested with Breeze and Vue and HMR works with Valet.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
laravel({
input: 'resources/js/app.js',
refresh: true,
valetTls: 'myprojectname.test'
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
],
});
Seems strange that the hot file is using http://localhost:5173 if you're using TLS and adding the cert, it should use https://myprojectname.test':5173 if that's the case. 🤔 Since you add the Valet cert Vite should be able to add the correct URL to the hot file.
If you're not using Valet secure anymore you might wanna use the @vitejs/plugin-basic-ssl plugin to auto-generate untested certificates.
You might also need to enter the :5173 port in the browser to accept the untrusted certificate, could be your browser is stopping the connection due to the cert being self-signed.
Level 67
@thinkverse I am still using Valet - without adding the cert I get the above error about the websocket connection failing. I may try these suggestions but HMR is currently working for me error-free with the config I posted.
1 like
Please or to participate in this conversation.