Web UI fails to load - JS module blocked due to incorrect MIME type #3841

Closed
opened 2026-02-16 17:41:39 -05:00 by yindo · 5 comments
Owner

Originally created by @nathabonfim59 on GitHub (Dec 24, 2025).

Originally assigned to: @adamdotdevin on GitHub.

Description

When I try to the WebUI, it gets stuck with this error in a blank page/

OpenCode version

OpenCode 1.0.198

Steps to reproduce

It occurs in both, with opencode serve and after the opening from the terminal, using Open WebUI.

  1. Open opencode
  2. Click Ctrl + P and select Open WebUI
  3. It shows as a blank screen

Screenshot and/or share link

The screenshot shows Zen (Firefox), but it was tested in Chrome, Helium, brave

Image
Loading module from “http://127.0.0.1:4096/assets/index-CFCjwJ3H.js” was blocked because of a disallowed MIME type (“text/html”). 127.0.0.1:4096

Loading failed for the module with source “http://127.0.0.1:4096/assets/index-CFCjwJ3H.js”. 127.0.0.1:4096:16:71
Image

Operating System

Linux archlinux 6.18.2-arch2-1 #1 SMP PREEMPT_DYNAMIC Thu, 18 Dec 2025 18:00:18 +0000 x86_64 GNU/Linux

Terminal

Ghostty (but it's web, not terminal)

Originally created by @nathabonfim59 on GitHub (Dec 24, 2025). Originally assigned to: @adamdotdevin on GitHub. ### Description When I try to the WebUI, it gets stuck with this error in a blank page/ ### OpenCode version OpenCode 1.0.198 ### Steps to reproduce It occurs in both, with `opencode serve` and after the opening from the terminal, using `Open WebUI`. 1. Open `opencode` 2. Click `Ctrl + P` and select `Open WebUI` 3. It shows as a blank screen ### Screenshot and/or share link The screenshot shows `Zen (Firefox)`, but it was tested in Chrome, Helium, brave <img width="685" height="116" alt="Image" src="https://github.com/user-attachments/assets/f7e32038-40c3-4f8a-96bc-cccfb1f71c02" /> ``` Loading module from “http://127.0.0.1:4096/assets/index-CFCjwJ3H.js” was blocked because of a disallowed MIME type (“text/html”). 127.0.0.1:4096 Loading failed for the module with source “http://127.0.0.1:4096/assets/index-CFCjwJ3H.js”. 127.0.0.1:4096:16:71 ``` <img width="1916" height="589" alt="Image" src="https://github.com/user-attachments/assets/e6a0ab94-fdb8-44af-bcb2-d126e3eb9c03" /> ### Operating System Linux archlinux 6.18.2-arch2-1 #1 SMP PREEMPT_DYNAMIC Thu, 18 Dec 2025 18:00:18 +0000 x86_64 GNU/Linux ### Terminal Ghostty (but it's web, not terminal)
yindo added the bugweb labels 2026-02-16 17:41:39 -05:00
yindo closed this issue 2026-02-16 17:41:39 -05:00
Author
Owner

@github-actions[bot] commented on GitHub (Dec 24, 2025):

This issue might be a duplicate of existing issues. Please check:

  • #5237: opencode web mode broken: empty page - multiple versions and multiple os (same MIME type error when assets fail to load)
  • #6109: Web/desktop breaks with blank page (similar blank page issue reported in recent versions)

Feel free to ignore if none of these address your specific case.

@github-actions[bot] commented on GitHub (Dec 24, 2025): This issue might be a duplicate of existing issues. Please check: - #5237: opencode web mode broken: empty page - multiple versions and multiple os (same MIME type error when assets fail to load) - #6109: Web/desktop breaks with blank page (similar blank page issue reported in recent versions) Feel free to ignore if none of these address your specific case.
Author
Owner

@nathabonfim59 commented on GitHub (Dec 24, 2025):

It seems to work in when running with bun dev from source

@nathabonfim59 commented on GitHub (Dec 24, 2025): It seems to work in when running with `bun dev` from source
Author
Owner

@nathabonfim59 commented on GitHub (Dec 25, 2025):

It appears to be fixed in 1.0.200. Thanks!

@nathabonfim59 commented on GitHub (Dec 25, 2025): It appears to be fixed in `1.0.200`. Thanks!
Author
Owner

@mrsaraiva commented on GitHub (Dec 26, 2025):

Still broken on 1.0.203 (CORS errors), launched with "opencode web --hostname 0.0.0.0 --port 4096":

Image

Note that this issue occurs when I attempt to access the web UI from a different machine. The CORS errors are gone if I access from the same machine (regardless of whether I use "localhost", "127.0.0.1" or the actual LAN IP).

@mrsaraiva commented on GitHub (Dec 26, 2025): Still broken on 1.0.203 (CORS errors), launched with "opencode web --hostname 0.0.0.0 --port 4096": <img width="1906" height="140" alt="Image" src="https://github.com/user-attachments/assets/c66c402f-ba75-4604-a326-531c109f7960" /> Note that this issue occurs when I attempt to access the web UI from a different machine. The CORS errors are gone if I access from the same machine (regardless of whether I use "localhost", "127.0.0.1" or the actual LAN IP).
Author
Owner

@mrsaraiva commented on GitHub (Dec 26, 2025):

Just FYI, if anyone else is running into this, the workaround is to load the web UI using:

http://lan_ip:port/?url=http://lan_ip:port

For a permanent fix, here's a patch that can be applied to packages/app/src/app.tsx and makes it respect whatever was passed to "--hostname"

  --- a/packages/app/src/app.tsx
  +++ b/packages/app/src/app.tsx
  @@ -34,6 +34,12 @@ const url = iife(() => {

     if (location.hostname.includes("opencode.ai")) return "http://localhost:4096"
     if (window.__OPENCODE__) return `http://127.0.0.1:${window.__OPENCODE__.port}`
  +
  +  // If accessing from a non-localhost hostname (e.g., LAN IP via --hostname),
  +  // use the current origin since the API is served from the same server
  +  if (!["localhost", "127.0.0.1"].includes(location.hostname)) {
  +    return window.location.origin
  +  }
  +
     if (import.meta.env.DEV)
       return `http://${import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "localhost"}:${import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"}`
@mrsaraiva commented on GitHub (Dec 26, 2025): Just FYI, if anyone else is running into this, the workaround is to load the web UI using: http://lan_ip:port/?url=http://lan_ip:port For a permanent fix, here's a patch that can be applied to packages/app/src/app.tsx and makes it respect whatever was passed to "--hostname" ``` --- a/packages/app/src/app.tsx +++ b/packages/app/src/app.tsx @@ -34,6 +34,12 @@ const url = iife(() => { if (location.hostname.includes("opencode.ai")) return "http://localhost:4096" if (window.__OPENCODE__) return `http://127.0.0.1:${window.__OPENCODE__.port}` + + // If accessing from a non-localhost hostname (e.g., LAN IP via --hostname), + // use the current origin since the API is served from the same server + if (!["localhost", "127.0.0.1"].includes(location.hostname)) { + return window.location.origin + } + if (import.meta.env.DEV) return `http://${import.meta.env.VITE_OPENCODE_SERVER_HOST ?? "localhost"}:${import.meta.env.VITE_OPENCODE_SERVER_PORT ?? "4096"}` ```
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: anomalyco/opencode#3841