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
7

It took some time since the server had also a problem with the filesystem.
However, also after adding “mailcap” package and adding the header informatin, the problem still persists.

I think it can be a wrong error message.
But not sure what it could be.

Loading the module from “AI Demo was blocked due to an unsupported MIME type (“text/html”).

demo

Failed to load the module with the source “AI Demo. demo:19:76

The stylesheet AI Demo was not loaded because its MIME type, “text/html,” is not “text/css.”

8

Now I found the real problem it seems.
The subpath is not provided at all (got the hint from Claude).
And then it is redirecting to the root page, which delivers an html file instead of css or javascript.

I commented the line with try_files {path} /index.html
And with /demo/index.html it redirects to the root index.html instead of the other webpage.

I made /demo first, but I am not sure if Caddy cares about order.

How can I change that, so it will stick with the second webpage in /opt/fe/website ?

9

I don’t follow. What do you mean here? Does the file not exist under assets/index-BGSeMjDe.js?

Is it a redirect in the sense of HTTP redirect, i.e. HTTP status 3xx? Or you mean it reads the file under /opt/fe/dev?

Caddy sorts by path matcher length in your case.

10
  1. Caddy serves the index.html, but no css or js file, it seems not to find them. But the path is correct, and the file existd.
  2. Redirect in sense it does not find the file (404), and falls back to index.html. That results in Mime error, since the browser wants to load css/js file, but gets html instead.
    From my point this is a bug in Caddy, 404 should not fall back to html file.
  3. Caddy sorts by path matcher length ? Can you pls point to the documentation or explain ?
11

It is not a bug. You used try_files. That’s what try_files entire purpose. See the linked docs. What’s the directory and file structure in each of your roots? Is the request path we’re seeing here the full path?

It is explained in detail under Sorting Algorithm section

1 Like
12

This is a problem in your application, not in the caddy configuration.

A standard react projects expects to be deployed under /, not /demo

Set "homepage": "/demo/" in your package.json, then rebuild and redeploy your react project

1 Like
13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.