Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html"

Help
1

1. The problem I’m having:

I deployed a new react.js application in /opt/fe/website (/demo/), but it is giving error messages. It is working on localhost.
Since the error message is about wrong mimetype, I tried to define them manually, but in that case, caddy does not start, without error details.
Where can I define the mime types ?
Or is something else causing the issue ?

handle /demo/ {
  root * /opt/fe/website
  try_files {path} /index.html
  file_server
  mime .css text/css
}

2. Error messages and/or full log output:

Caddy error:

Job for caddy.service failed because the control process exited with error code.
See “systemctl status caddy.service” and “journalctl -xeu caddy.service” for details.

Browser error:

“Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of “text/html”. assets/index-BGSeMjDe.js

3. Caddy version:

v2.10.2

4. How I installed and ran Caddy:

Started with systemctl start caddy.

a. System environment:

Caddy is on a linux ubuntu server (24.04.2 LTS).

b. Command:

systemctl restart caddy

c. Service/unit/compose file:

No docker.

d. My complete Caddy config:

qcg-ai.ch www.qcg-ai.ch {
encode
templates
handle /demo/ {
root * /opt/fe/website
try_files {path} /index.html
file_server
#mime .css text/css
}
handle /demo {
redir * /demo/
}
handle /api/* {
uri strip_prefix /api
reverse_proxy localhost:8080 {
health_uri /ping
health_port 8080
health_interval 30s
health_timeout 30s
#header_up X-API-Key {env.API_KEY}
}
}
handle /api {
redir * /api/
}
handle {
root * /opt/fe/dev
try_files {path} /index.html
file_server
}
tls info@inss.ch
log {
output file /var/log/caddy/access.log
format json
}
}

PASTE OVER THIS, BETWEEN THE ``` LINES.
Please use the preview pane to ensure it looks nice.

5. Links to relevant resources:

https://qcg-ai.ch/demo

2

There’s no directive mime in Caddy. You’ll need to use the header directive. I also recommend you go through the matchers section on the Caddyfile Concepts page.

The browser seems to be complaining about a JavaScript file, but your attempt is with .css extension. Ensure you have mailcap installed, as it’s the package providing the OS the database of mimetypes.

2 Likes
3

It complained abouth both a js and a css file (css being text/html and not text/css). I just started with the css.

4

"There’s no directive mime in Caddy.”
I took that from there, but seems to be no official documentation and not correct:
http.mime - Caddy User Guide

5

You’ll need to use the header directive.

I don’t see anything about mimetypes in the header documentation.

6

That’s not the official documentation site. Please refer to our official site. The linked page is a copy of our v1 documentation. Caddy is not at v2.10.2.

This sounds like you should resolve it with mailcap first. Install the mailcap package first. If that doesn’t solve it, you can do this:

header *.css Content-Type text/css
header *.js Content-Type text/javascript

But that is a hacky way to resolve a gap in the OS. Try mailcap first.

3 Likes