Vite (React) returns blank page behind Coder code-server proxy (absolute paths / MIME error)

[thibault-chausson]

Hello,

I’m reaching out because I’m facing an issue with Coder’s proxy when developing with Vite (React).

When I run npm run dev, I get a blank page because main.jsx cannot be found, or I get a 404 error, depending on the vite.config configuration.

Analysis

1. The actual URL is:
   https://mondomanie.com/@user/test.main/apps/code-server/proxy/5173/

2. The Vite server listens on localhost:5173 inside the workspace (when I run npm run dev).

3. The browser does not access localhost:5173 directly, but goes through the built-in code-server proxy.

4. When the browser requests /@vite/client or /src/main.jsx through the proxy, Vite does not recognize this path and returns index.html, resulting in a text/html MIME error in the console.

5. Even with a correct allowedHosts, HMR disabled, and base configured as
   /@user/test.main/apps/code-server/proxy/5173/,
   Vite does not understand that proxy paths should map to /.

Consequences

• Vite generates <script type="module" src="/src/main.jsx"> using absolute paths (/src/...).
• Behind the proxy, the absolute path /src/... does not match the real URL, so the browser receives the proxy HTML page, hence the text/html MIME error.
• In other words, Vite thinks it is serving from /, but the proxy adds a prefix (/@user/.../proxy/5173).

Vite configuration

/// <reference types="vitest" />
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  base: '/@user/test.main/apps/code-server/proxy/5173/',
  server: {
    host: true,
    allowedHosts: ['mondomanie.com']
  },
  plugins: [react()],
})

My browser redirects me to /proxy/5173/@user/test.main/apps/code-server/proxy/5173

Issue

I get this error when I click on the forwarded ports notification in code-server.

Do you have any ideas on how to fix this issue?

Thank you in advance.

Best regards,

[code-asher]

Ah yeah I think Vite is one of those applications that needs to see the full original path and cannot work relatively, at least based on what I have seen (I have not used it myself).

For code-server you can use the non-rewriting /absproxy instead of /proxy to accomplish this, however you will still have Coder's proxy (the /user/agent/apps/code-server part) that also rewrites and I do not believe there is a non-rewriting option there.

I think the only solution might be to use subdomain-based apps instead of path-based apps. Or if you could forward the port in some other way, like through the coder cli or SSH.

I wonder if maybe Vite could be told to use a relative base? base: ./ or something?