vite-plugin: Asset files are not loading after a fresh Laravel Sail installation on MacOS

@AdyGCode I tried your workaround but still doesn’t work for me. I even tried setting server.host to localhost, which changed the address from 0.0.0.0 to localhost but the resources didn’t load, which is all kind of confusing since changing the value manually in the rendered page to localhost actually loads the assets

@tuto1902 I know I’ll probably be teaching you to suck eggs, but did you:

• CTRL+C to stop the npm run and then re-run using sail npm run dev?
• From time to time I will also sail down and then sail up after the changes if I am not sure changes were correctly picked up.

You may also want to run sail npm update just as a precaution.

The server.host (from what I read and recall) will not help when working with a sail/docker container - I believe the server.host needs to be 0.0.0.0 for docker/containers. The host, in this case, is the HMR (hot module reload?) and I set that to localhost and that seemed to work for me.

I also did force my cache to be cleared in Safari [CMD+OPT+E]. May also need to clear the Laravel cache as well [sail artisan cache:clear].

@AdyGCode Thanks for the reply. I tried all the suggestions: sail down and sail up, Ctr+C, sail npm update, clearing cache from safari and from artisan. Nothing seems to work in my case. As a last resort, I’ll try to get a hold of a different Mac and try to run a fresh install there to see how it goes.

Btw, your reply made me think of this immortal line 🤣

@AdyGCode @Fedeorlandau Accessing the Vite dev server directly (http://localhost:3000 or http://localhost:5173, depending on whether you’re running it inside Sail) is expected to return a blank screen at the moment as that’s just where Vite serves assets for HMR. This has been improved with #57 as we’ll now be outputting a default help screen to instruct users to run a dev server for Laravel.

Ok, so I think this is just a problem with my Mac mini, or the Mac OS version, or the version of Safari, or maybe an ancient curse passed down by generations… In any case, I just ran my own steps to reproduce in an old MacBook Air with Mac OS Big Sur and sure enough, everything worked fine out of the box.

That happens, and given my configuration is a bit wild, I was wondering the same.

If you get the chance to re-build the Mini then you may find it clears up the issue. If not it, you have your answer for now.

@timacdonald if there’s no objection from anyone else, I think we can close this issue. 🤷🏻‍♂️

@timacdonald and @tuto1902 - No problems closing, but it may be worth adding a note that in some situations, the HMR option under server may be required.

Ok, so I think this is just a problem with my Mac mini, or the Mac OS version, or the version of Safari, or maybe an ancient curse passed down by generations… In any case, I just ran my own steps to reproduce in an old MacBook Air with Mac OS Big Sur and sure enough, everything worked fine out of the box.

@timacdonald if there’s no objection from anyone else, I think we can close this issue. 🤷🏻‍♂️

Hi @timacdonald,

I’m getting very similar issues to the other users, and I’m running on an Intel Mac, with Docker Desktop 4.10+

As I prefer to use MariaDB over MySQL, I used the steps:

curl -s "https://laravel.build/l9-vite?with=mariadb,redis,memcached,meilisearch,minio,selenium,mailhog" | bash
cd example-app
./vendor/bin/sail up
sail composer require laravel/breeze
sail artisan breeze:install
sail npm install && sail npm run dev

The vite.config.js file reads:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Docker compose file docker-compose.yml has the lines:

        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'

Tested using Chrome, Safari, Edge and Firefox.

• http://localhost:5173

  • Safari: BLANK
  • Chrome: No web page was found for the web address: http://localhost:5173/
  • Firefox: see Chrome
  • Edge: see Chrome

• http://localhost

  • Safari: Default welcome screen
  • Chrome: Default welcome screen
  • Firefox: Default welcome screen
  • Edge: Default welcome screen

• http://localhost/register

  • Safari: No assets loaded, as per @tuto1902
  • Chrome: Assets load
  • Firefox: Assets load
  • Edge: Assets load

On everything except Safari, I’ve managed to view the content as it should be for the default layout.

I use multiple browsers for testing to make sure that things are as I expect, so the fact that Safari is failing for some reason is a mild concern.

More of a concern is also that the http://localhost:5173/ is not rendering anything.

I have had no problems in the past with Mix.