CSS ChunkLoadError caused by failed MIME type check in V0.92.7

[MadeOfClicks]

Description

Hello there,

I have tried fiddling around with Brave, Cloudflare and Nginx to solve this error from my end but I'm failing to do so.
V0.92.6 works without issues, using V0.92.7 / stable / latest all introduce the error.

The problem only occurs on my desktop pc (win 11 pro) using brave and chrome, I've not tested other browsers yet.
I can access the application via my android phone using the mobile browser, it also works using desktop site mode from my phone.
I can access the application via my win 11 device using dev tools via device toolbar and loading it in a mobile view first..

my setup:
selfhosting the app over my raspberry pi using a subdomain of mines

google as idp via cloudflare zero trust
cloudflared tunnel via container in docker
cloudflared/config.yaml:

ingress:
  - hostname: sub.domain.com
    service: http://nginx-proxy:80

docker-compose:

  trilium:
    image: triliumnext/notes:v0.92.7
    container_name: trilium
    restart: unless-stopped
    ports:
      - "8080:8080"
    environment:
      - USER_UID=107
      - USER_GID=111
      - TRILIUM_NETWORK_TRUSTEDREVERSEPROXY=1
      - TRILIUM_START_NOTE_ID=root ./trilium
    volumes:
      - /srv/services/trilium:/home/node/trilium-data
    networks:
      - proxy_net
...
networks:
  proxy_net:
    driver: bridge

serverblock in nginx.conf

server {
    listen 80;
    server_name sub.domain.com;

    proxy_buffer_size 128k;
    proxy_buffers 4 256k;
    proxy_busy_buffers_size 256k;

    location / {
        proxy_pass http://trilium:8080/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;

        proxy_read_timeout 86400;
        proxy_send_timeout 86400;
    }
    client_max_body_size 0;
}

TriliumNext Version

0.92.7

What operating system are you using?

Windows

What is your setup?

Server access only

Operating System Version

Debian GNU/Linux 12 (bookworm)

Error logs

Dev console:

sub.domain.com/:1 Refused to apply style from 'https://sub.domain.com/assets/v0.92.7/app-dist/3013.css' because its MIME type ('application/json') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

bulk_action.ts:80
15:02:15 Uncaught error: Message: Loading CSS chunk 3013 failed.
(error: https://sub.domain.com/assets/v0.92.7/app-dist/3013.css), Line: undefined, Column: undefined, Error object: {"name":"ChunkLoadError","code":"CSS_CHUNK_LOAD_FAILED","type":"error","request":"https://sub.domain.com/assets/v0.92.7/app-dist/3013.css"}, Stack: ChunkLoadError: Loading CSS chunk 3013 failed.
(error: https://sub.domain.com/assets/v0.92.7/app-dist/3013.css)
    at t.<computed>.t.<computed>.<computed>.n.push.t.<computed>.s.onerror.s.onload (https://sub.domain.com/assets/v0.92.7/app-dist/desktop.js:2:385337)
b @ bulk_action.ts:80

css loading:42 
Uncaught (in promise) ChunkLoadError: Loading CSS chunk 3013 failed.
(error: https://sub.domain.com/assets/v0.92.7/app-dist/3013.css)
    at t.<computed>.t.<computed>.<computed>.n.push.t.<computed>.s.onerror.s.onload (css loading:42:35)

Docker Logs:

DB size: 5079 KB
Becca (note cache) load took 24ms
{
  "appVersion": "0.92.7",
  "dbVersion": 229,
  "nodeVersion": "v22.14.0",
  "syncVersion": 34,
  "buildDate": "2025-04-10T18:19:42Z",
  "buildRevision": "64869f80eeacb49ad6099b677b4b80e8e8008c27",
  "dataDirectory": "/home/node/trilium-data",
  "clipperProtocolVersion": "1.0",
  "utcDateTime": "2025-04-15T12:09:53.847Z"
}
CPU model: Cortex-A76, logical cores: 4, freq: 1500 Mhz
Trusted reverse proxy: 1
App HTTP server starting up at port 8080
Listening on port 8080
websocket client connected
200 GET /api/health-check with 15 bytes took 6ms
Table counts: notes: 456, revisions: 214, attachments: 76, branches: 475, attributes: 680, etapi_tokens: 0, blobs: 378
All consistency checks passed with no errors detected (took 19ms)
200 GET /api/health-check with 15 bytes took 2ms
CSRF token generation: Successful
304 GET /api/keyboard-actions with 14690 bytes took 8ms
304 GET /api/options with 7955 bytes took 1ms
200 GET /api/tree with 62525 bytes took 4ms
304 GET /api/autocomplete/notesCount with 3 bytes took 2ms
websocket client connected
304 GET /api/options/locales with 596 bytes took 2ms
304 GET /api/script/widgets with 2 bytes took 2ms
JS Error: Uncaught error: Message: Loading CSS chunk 3013 failed.
(error: https://sub.domain.com/assets/v0.92.7/app-dist/3013.css), Line: undefined, Column: undefined, Error object: {"name":"ChunkLoadError","code":"CSS_CHUNK_LOAD_FAILED","type":"error","request":"https://sub.domain.com/assets/v0.92.7/app-dist/3013.css"}, Stack: ChunkLoadError: Loading CSS chunk 3013 failed.
(error: https://sub.domain.com/assets/v0.92.7/app-dist/3013.css)
    at t.<computed>.t.<computed>.<computed>.n.push.t.<computed>.s.onerror.s.onload (https://sub.domain.com/assets/v0.92.7/app-dist/desktop.js:2:385337)
Stack: Error
    at Object.b [as logError] (https://sub.domain.com/assets/v0.92.7/app-dist/desktop.js:2:123058)
    at https://sub.domain.com/assets/v0.92.7/app-dist/desktop.js:2:43575

[eliandoran]

If you try to access https://sub.domain.com/assets/v0.92.7/app-dist/3013.css in the browser where you're having the issue, what is it showing?

[MadeOfClicks]

{"message":"Router not found for request GET /assets/v0.92.7/app-dist/3013.css"}

[MadeOfClicks]

$ sudo docker exec nginx-proxy curl -v "http://trilium:8080/assets/v0.92.7/app-dist/3013.css"

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0* Host trilium:8080 was resolved.
* IPv6: (none)
* IPv4: ...
*   Trying ...:8080...
* Connected to trilium (...) port 8080
* using HTTP/1.x
> GET /assets/v0.92.7/app-dist/3013.css HTTP/1.1
> Host: trilium:8080
> User-Agent: curl/8.12.1
> Accept: */*
> 
* Request completely sent off
< HTTP/1.1 404 Not Found
< X-Powered-By: Express
< Cross-Origin-Opener-Policy: same-origin
< Cross-Origin-Resource-Policy: same-origin
< Origin-Agent-Cluster: ?1
< Referrer-Policy: no-referrer
< Strict-Transport-Security: max-age=31536000; includeSubDomains
< X-Content-Type-Options: nosniff
< X-DNS-Prefetch-Control: off
< X-Download-Options: noopen
< X-Frame-Options: SAMEORIGIN
< X-Permitted-Cross-Domain-Policies: none
< X-XSS-Protection: 0
< Content-Type: application/json; charset=utf-8
< Content-Length: 80
< ETag: W/"50-yWEls59e9adiL0Tz9PMSrU7tDnA"
< Vary: Accept-Encoding
< Date: Tue, 15 Apr 2025 10:50:53 GMT
< Connection: keep-alive
< Keep-Alive: timeout=600
< 
{ [80 bytes data]
100    80  100    80    0     0   9189      0 --:--:-- --:--:-- --:--:-- 10000
* Connection #0 to host trilium left intact
{"message":"Router not found for request GET /assets/v0.92.7/app-dist/3013.css"}

[eliandoran]

@MadeOfClicks , the only explanation I can think of is that there is some bad cache in your browser.
I've set up Docker with the 0.92.7 tag and I have the same output as you.
Try doing a full refresh in your desktop client using Ctrl+Shift+R.

Also try opening it in a Private / Incognito window.

[pano9000]

can you check inside the Docker container, if the file exists?

if you run

docker exec -it $your_container_id sh

(potentially using bash instead of sh will also work, not sure which shell is used by default)

you should end up in the app directory and should be able to check for the file by doing e.g. via

ls src/public/app-dist/
stat src/public/app-dist/3013.css