Flux.js Route Error

[Bengeljo]

Flux version

v2.10.2

Livewire version

v3.7.3

Tailwind version

v4.1.18

Browser and Operating System

Chrome on Win 11

What is the problem?

Hey, I ran into the problem that the Flux.js file isn't loading. After searching through the web and even looking at a few tickets here, I need to open a ticket now.

I don't know what I am doing wrong, cause in the Issue #1617 you probably found the fix for it. Since it was also merged, I thought it would be solved with it. Now I am on the latest version of Flux and I even looked it up in the vendor files, I still get the same error.

In my nginx config I have also the
location ~ ^/flux/flux(\.min)?\.(js|css)$ { expires off; try_files $uri $uri/ /index.php?$query_string; }
Block but that also doesn't help.

For what ever reason it just won't work for me. I cleared all the caches, restarted nginx multiple times as I wasn't sure if I did or not and well it just keeps happening.

I also tried it in a different browser and on a different device.

GET http://ip-address_of_vps/flux/flux.js?id=618aa74b net::ERR_ABORTED 404 (Not Found)

In my local enviroment the error isn't appearing and also in my webhosted website, it isn't appearing. So either I have some wrong settings with my nginx that I don't understand or something else is messing with me.

For nginx I use the Laravel one they provided in https://laravel.com/docs/12.x/deployment with the added flux one I mentioned before.

Code snippets to replicate the problem

location ~ ^/flux/flux(\.min)?\.(js|css)$ { expires off; try_files $uri $uri/ /index.php?$query_string; }

GET http://ip-address_of_vps/flux/flux.js?id=618aa74b net::ERR_ABORTED 404 (Not Found)

Screenshots/ screen recordings of the problem

How do you expect it to work?

The the flux.js file can be found

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[jeffchown]

@Bengeljo Is your app in a subfolder? Could the issue be your .env's APP_URL setting?

To configure Laravel to work in a subfolder using the APP_URL environment variable, set the APP_URL in the .env file to include the subfolder path, such as APP_URL=http://localhost/subdir.
This ensures that URLs generated by Laravel, including those from asset() and mix() helpers, are correctly prefixed with the subdirectory.

[joshhanley]

@Bengeljo thanks for reporting! Can you please share your full Nginx config so we can have a look? Thanks!

[Bengeljo]

@joshhanley Hey, I replaced all the info related to the real ip etc. with example.
Beside that this is the full nginx config I have. Like I said, it is pretty much the same as in the Laravel Docs and the flux one that is provided in the docs.

@jeffchown Sorry for the late reply, the APP_URL is set to exampe.com with no subdir. Like you can see from the nginx config it is located in the folder www and then comes the project where the projects lives and works in.

Beside the flux component everything else works as intended.
I should probably mention that it currently works only over an ip address as the subdomain wasn't ready as I am not in control over the main domain. But in my understanding this shouldn't be the problem

server {
    listen 80;
    listen [::]:80;

    
    server_name example.com;   

    root /home/github/www/example/public;  

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location ~ ^/flux/flux(\.min)?\.(js|css)$ {
        expires off;
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /livewire/livewire.js {
        try_files /livewire/livewire.js =404;
        internal;
        alias /home/github/www/example/public/livewire/livewire.js;
    }

    location = /flux/flux.js {
        try_files /flux/flux.js =404;
        internal;
        alias /home/github/www/example/public/flux/flux.js;
    }

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location /livewire/livewire.js {
        try_files /livewire/livewire.js /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;  
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }

    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        access_log off;
    }
}

[joshhanley]

@Bengeljo thanks for that! It looks like you have added this to the default Laravel config, which is what will be blocking it.

    location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        access_log off;
    }

You can add exemptions to that directly instead of having all of the extra Livewire and Flux location blocks.

    location ~* ^(?!/(flux|livewire)/).*\.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        access_log off;
    }

So your full config should look something like this. Can you test it out and let us know how you go? Then we will look at updating our documentation.

server {
    listen 80;
    listen [::]:80;

    server_name example.com;   

    root /home/github/www/example/public;  

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;

    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/var/run/php/php8.3-fpm.sock;  
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }

    location ~* ^(?!/(flux|livewire)/).*\.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        access_log off;
    }
}

[Bengeljo]

@joshhanley Yeah that fixed it! Thanks a lot for helping out, that was really annoying but I would guess it is more of a problem of my lack of knowledge about nginx configs. I should read the docs more carefully next time.

[joshhanley]

@Bengeljo no worries!