Level 102
Check the browser console for errors
Jul 26, 2022
14
Level 4
Laravel 9 + WSL2 + Vite issue
Hi
Info: Laravel 9.22 + breeze
I have laravel 9.22 on Ubuntu subsystem (WSL2). When I run sail npm run dev I got
VITE v3.0.3 ready in 399 ms
➜ Local: http://localhost:5173/
➜ Network: http://172.28.0.7:5173/
LARAVEL v9.22.1 plugin v0.5.2
➜ APP_URL: http://my-workout.test
But when I view application on the browser and I click Login on login screen nothing change and when I'm visiting /register there are no lables of form.
On the sourcoe code I have thoes:
<!-- Styles -->
<link rel="stylesheet" href="http://localhost/css/app.css">
<!-- Scripts -->
<script src="http://localhost/js/app.js" defer></script>
On the vite.config.js I add
server: {
hmr: {
host: 'localhost'
}
}
Can someone had the same problem?
Level 4
@Sinnbeck No errors in the console app.blade.php
@vite(['resources/css/app.css', 'resources/js/app.js'])
Weird thing is that I clear the css file in the /public/css/app.css and after I run again npm run dev nothing change, the file is stil empty.
Level 102
@skreng yeah npm dev does not write up files. npm run prod does. And they are in /public/build
These make no sense with vite so I don't know where they come from
<link rel="stylesheet" href="http://localhost/css/app.css">
<!-- Scripts -->
<script src="http://localhost/js/app.js" defer></script>
Did you add them manually?
Level 102
Try
php artisan view:clear
Level 4
@Sinnbeck Nope. Nothing change
Level 102
@skreng then those two lines must come from your code somewhere. Vite has /build/ and a hash in the url
Level 4
@Sinnbeck Those 2 lines are from http://localhost/login the basic login system that Laravel gives after install breeze.
I see that in the build are 2 files with hash. One .css and second .js but still when I lode the page and make Inspect element in toolbar I see this urls that are above.
I just realize that view app.blade.php is not refreshing after changes. I add the comment to the file and in view source on the browser I don't see it. I try
- sail artisan view:clear
- sail artisan optimize:clear
And nothing comment or any changes don't show :(
Level 102
Are those script and link tags manually added? You need to use @vite() if that's the case
Level 2
Are you seeing this in the console?
TypeError: Failed to resolve module specifier "http://::1:5173/@react-refresh". Relative references must start with either "/", "./", or "../".
I'm on vacation and decided to spinup a hobby project with Inertia/React but here I am stuck seeing that problem in my console. No ide what is causing it.
Level 102
@evelynfredin make your own thread and I will help you solve it. I just fixed it myself today
1 like
Level 4
@evelynfredin No errors in the console
Level 1
@evelynfredin Hello, I had a problem similar to yours, after searching for a long time, I realized that this route is written in a file called "hot" inside the public folder, I changed it and it worked.
Level 4
Ok I realize that something was wrong with the cache view and it hold old view with wrong URL to .css and .js Artisan comands don't works and I manualy remove the cache files from storage and everyting works fine!
BTW. I need to make npm run dev not in the docker. But this is issie that I know.
Level 102
@skreng ok stange. Normally the commands work. But good that it's working. Mark a best answer to set the thread as solved
Please or to participate in this conversation.