Level 80
@ignaciodev I run Laravel projects, and Vite, on both Intels and an M2 MacBook Pros, and never had an issue.
Can you show a screenshot of the errors in the Safari web inspector console?
Sep 11, 2023
8
Level 2
Vite dev does not work in Safari Mac
On a fresh Laravel installation (with Laravel Breeze React), when I run npm run dev, and visit http://localhost, everything works great on Chrome. But on Safari it never works. All I see is a blank screen, and this on the console:
[Error] Failed to load resource: bad URL (@react-refresh, line 0)
[Error] Failed to load resource: bad URL (app.jsx, line 0)
[Error] Failed to load resource: bad URL (Welcome.jsx, line 0)
[Error] Failed to load resource: bad URL (client, line 0)
My Mac is only 1 year old, very up to date.
Level 2
@martinbean how bizarre! It's never worked on my M1 Macbook Pro. Here is the screenshot:
Level 2
I found a workaround by modifying my vite.config.js adding this before plugins:
server: {
hmr: {
host: 'localhost',
},
},
It now renders on Safari.
3 likes
Level 2
@ignaciodev I was having the same issue; your suggestion fixed it for me. Thank you!
2 likes
Level 15
Tested Laravel Breeze with both Herd/Valet and Sail on Macbook PRO with M2 PRO and could not reproduce this issue. Even running the Sail container and starting Vite from outside the container worked without issue.
That's not much of a consolation but at least you know. 🤷♂️
Level 2
@thinkverse yes, it's bizarre 🤔 I found a Github thread where a bunch of devs were experiencing the same issue as me, while some others could not reproduce the issue at all.
The vite.config.js modification workaround seems to do the trick I guess.
1 like
Level 1
I was able solve it with: https://laravel.com/docs/10.x/vite#working-with-a-secure-development-server
4 likes
Level 12
@josemflores thank you. This solved my issue.
If someone else finds this: Safari blocked the vite files which was referenced through an insecure http://localhost connection instead of through the valet ssl domain. Adding detectTls: 'domain.test' to the laravel config in vite.config.js solved it. Check out the link @josemflores posted above.
1 like
Please or to participate in this conversation.