Cove Theme Style Issue

[waleedrehman31]

Cove Theme Styles Not Loading

Hi everyone,

I’m experiencing an issue with the Wave Laravel Starter Kit after activating the Cove theme. Despite following the installation and build process, the styles for the Cove theme are not being applied.

Steps I Followed

1. Installed all dependencies using npm install.
2. Activated the Cove theme via the admin panel.
3. Ran the npm run build command successfully (no errors).

The Problem

The build process completes without errors, but the frontend does not reflect the Cove theme styles. It seems like the styles are either not being generated or not being applied correctly.

What I Tried

• Verified that the npm run build command completes successfully.
• Cleared caches (php artisan cache:clear and php artisan config:clear).
• Checked the public directory to ensure assets were generated.

Environment

• Wave Version: v3
• Node.js Version: v22.1.0
• NPM Version: 10.7.0
• Laravel Version: 11

Request for Help

Has anyone encountered a similar issue or know what might be causing this? Any tips on troubleshooting or resolving the problem would be greatly appreciated.

Thanks in advance for your help!

Best regards,
Waleed

[bobbyiliev]

Hey!

I've just tested this but it seems to be loading as expected:

A few things to check here would be:

• Do you see any errors in your web console?

• Does this only happen for the Cove theme or all themes?

• What is the web service that you are using to run Wave locally?

• Have you set the APP_URL to exactly match your domain name?

• Once you run the build command do you get this output:

 npm run build

> build
> vite build

Active theme: cove
vite v5.4.11 building for production...
✓ 3 modules transformed.
public/build/manifest.json                0.52 kB │ gzip:  0.19 kB
public/build/assets/theme-BqCa0_3y.css  137.29 kB │ gzip: 19.38 kB
public/build/assets/app-C-P-tjZN.css    184.32 kB │ gzip: 24.04 kB
public/build/assets/app-CuBpdYhA.js       0.42 kB │ gzip:  0.31 kB
✓ built in 948ms

[waleedrehman31]

A few things to check here would be:

Do you see any errors in your web console? Yes no errors in web console.

Does this only happen for the Cove theme or all themes? no just try Cove theme

What is the web service that you are using to run Wave locally? Locally Herd

Have you set the APP_URL to exactly match your domain name? Yes

Once you run the build command do you get this output: Yes it build successfully with the theme name

[bobbyiliev]

no just try Cove theme

Not sure if I understand this, do you mean 'no' it works for the others, or no you've only tried Cove?

If you were to try with npm run dev does it work?

Can you also try setting WAVE_DEMO=false in your .env file?

[inpresif]

[Apologies this is regarding the Anchor theme.]

FYI: I have the exact same issue as @waleedrehman31 since I changed 1 line in app\resources\themes\anchor\pages\profile[username].blade.php

<p class="text-sm text-zinc-600">This is your user profile page for <title>{{ setting('site.title', '') }}</title></p>

I'm using Docker other than that same settings as he is.
Also tried running all these commands:

php artisan icons:cache
php artisan cache:clear
php artisan view:clear
php artisan livewire:publish --assets (I saw a console log message about it being outdated)
npm run build

No (console) errors. Just only shows these unstyled (by the looks of it) icons and some text.

I'm looking into it more, but thought I'd let you know he is not the only one with the issue.

EDIT:
I found a similar issue here regarding Filament. Might be related. Before I screw up any relations it has with your Wave3 integrations, is it safe to follow the steps there?
filamentphp/filament#5956

(checked all settings, didn't help).

Did a complete new Docker build --no-cache. Didn't help either.

EDIT II:
The issue seems to be here:
http://[::1]:5173/resources/themes/anchor/assets/css/app.css
My console log shows this (for 1 js and 2 css files):
GET http://[::1]:5173/resources/themes/anchor/assets/css/app.css net::ERR_EMPTY_RESPONSE
(failed)net::ERR_CONNECTION_REFUSED

Tried to chmod the files and folder, set user etc. Also added this to vite.config.js and exposed port 5173 in docker-compose.

    server: {
        cors: true, // Enables CORS
        host: '0.0.0.0', // Allows external access | also tried localhost
        port: 5173,
    },

With the changes above, when I run http://localhost:5173/ I get the landing page for Vite/Laravel, which starts with:
This is the Vite development server that provides Hot Module Replacement for your Laravel application.

Then when running in npm run dev mode, the URL to CSS becomes
http://0.0.0.0:5173/resources/themes/anchor/assets/css/app.css
which is then shows (failed)net::ERR_ADDRESS_INVALID

I'm afraid I have exhausted all options I could find. I hope this small essay will help others using Wave or Vite.

Any suggestions left I could try out?

[inpresif]

Adding this to my own post...

    server: {
        host: true,
        hmr: {
          host: "localhost",
        },
    },

Adding the above to vite.config.js seemed to do the trick (partially) for the frontpage. Now still a 500 error for the dashboard but I'm getting close :)

• well... it was shortlived. Worked a second and i am back the square one.

[bobbyiliev]

Hi there 👋

Can you try the following:

• Set WAVE_DEMO the env var to false in your .env file
• Then run npm run build

If that does not work, can you share your exact Docker setup? Sounds like it might be related to how the Vite server is exposed in your Docker setup.

[inpresif]

Can you try the following:

• Set WAVE_DEMO the env var to false in your .env file
• Then run npm run build

Hey Bobby,

Here's what I have working now, partially:

vite.config.js

export default defineConfig({
    server: {
        host: true,
        hmr: {
            host: 'localhost',
        },
    },
    plugins: [
        laravel({
            input: [
                `resources/themes/${activeTheme}/assets/css/app.css`,
                `resources/themes/${activeTheme}/assets/js/app.js`,
                'resources/css/filament/admin/theme.css',
            ],
            // refresh: true,
            refresh: [
                `resources/themes/${activeTheme}/**/*`,
            ],
        }),
    ],

});

In my docker-compose.yml, the nodejs section:

...
    ports:
      - "5173:5173" # Expose Vite's development server
    
 ...

In .env, this was always set as is, i never actually changed it:
WAVE_DEMO=false

Now, when I run npm run dev, it works (only get a few errors in console, I'll post an image).

But, when I exit dev and run npm run build I am back to square one and these errors pop up in my console (not sure if that is the reason styling disppears).

The weird part is, the links to css etc are fine and loading correctly when I click them.

Thanks, I appreciate the feedback since it is not paid support, I hope our journey helps others with the same issues so you don't have to explain twice :)

Added:
Difference between dev and build seems to be this in console > network for the css file:
Build prod

Request URL: http://api2.domain.com/build/assets/app-CSvAr6xy.css
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:80
Referrer Policy: strict-origin-when-cross-origin

vs . DEV

Request URL: http://localhost:5173/resources/themes/anchor/assets/css/app.css
Request Method: GET
Status Code: 200 OK
Remote Address: [::1]:5173
Referrer Policy: strict-origin-when-cross-origin

Also, when stopping DEV the hot-file is autodeleted so that is never there.

[inpresif]

Wow... I finally solved this after some awful long troubleshooting :)

I noticed the CSS was loaded as text/plain. I had to make an adjustment in my nginx.conf file, which now has this:

http {

    include       mime.types;
    default_type  application/octet-stream;

    # Add the following to ensure proper MIME type for .css
    types {
        text/css css;
        application/javascript js;
    }

  include /etc/nginx/conf.d/*.conf;
  # Other http-level directives
}

I hope this helps some others save time.

[bobbyiliev]

Ah nice! Good find! Thank you for sharing it here! I will submit a PR to add this to the docs!