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,