[Bug]: vite can't load css

[wall-wxk]

Is there an existing issue for this?

• I have searched the existing issues

OS/Web Information

• Web Browser: Chrome
• Local OS: macOS
• Remote OS: ubuntu 22.04
• Remote Architecture: amd64
• code-server --version: 4.12.0

Steps to Reproduce

1. install code-server v4.12.0 by Standalone releases, expose docker port 9998:8080
2. enter the docker container and run command /root/code-server/bin/code-server
3. visit code-server by http://localhost:9998/?folder=/mnt
4. open the code-server vscode cmd, run command npm create vite@latest

root@28b248cb66b2:/mnt# npm create vite@latest
npx: 1 安装成功，用时 1.085 秒
✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

Scaffolding project in /mnt/vite-project...

Done. Now run:

  cd vite-project
  npm install
  npm run dev

5. change the vite.config.ts like this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/proxy/5177',
  server: {
      port: 5177,
  },
})

6. open the code-server vscode cmd, run command npm run dev
7. open chrome to visit http://localhost:9998/proxy/5177/proxy/5177

Expected

load src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css like this:

import {createHotContext as __vite__createHotContext} from "/@vite/client";
import.meta.hot = __vite__createHotContext("/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css");
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "/Users/leon/work/new-test-vue-project/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css"
const __vite__css = "\nh1[data-v-e17ea971] {\n  font-weight: 500;\n  font-size: 2.6rem;\n  top: -10px;\n}\nh3[data-v-e17ea971] {\n  font-size: 1.2rem;\n}\n.greetings h1[data-v-e17ea971],\n.greetings h3[data-v-e17ea971] {\n  text-align: center;\n}\n@media (min-width: 1024px) {\n.greetings h1[data-v-e17ea971],\n  .greetings h3[data-v-e17ea971] {\n    text-align: left;\n}\n}\n"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
export default __vite__css
import.meta.hot.prune(()=>__vite__removeStyle(__vite__id))

Actual

caught SyntaxError: Unexpected token '.' (at HelloWorld.vue?vue&type=style&index=0&scoped=e17ea971&lang.css:2:1)

the content:

.read-the-docs[data-v-e17ea971] {
  color: #888;
}

but execute by script.

Logs

No response

Screenshot/Video

2023-05-16.09.40.16.mov

Does this issue happen in VS Code or GitHub Codespaces?

• I cannot reproduce this in VS Code.
• I cannot reproduce this in GitHub Codespaces.

Are you accessing code-server over HTTPS?

• I am using HTTPS.

Notes

No response

[code-asher]

You might need to use /absproxy/5177/ instead.

[wall-wxk]

You might need to use /absproxy/5177/ instead.

Thx. It Work!
Could you tell me the difference between /proxy/5177 and /absproxy/5177/?

[code-asher]

/proxy rewrites while /absproxy does not. If you are familiar with NGINX it is similar to how a trailing slash in proxy_pass behaves.

So when you visit /proxy/5177/ code-server rewrites this to / then sends a request for / to the application.

When you visit /absproxy/5177/ code-server does not rewrite this and sends a request for /absproxy/5177/ to the application.

Some applications expect one method and some expect the other so we have both.

[wall-wxk]

/proxy rewrites while /absproxy does not. If you are familiar with NGINX it is similar to how a trailing slash in proxy_pass behaves.

So when you visit /proxy/5177/ code-server rewrites this to / then sends a request for / to the application.

When you visit /absproxy/5177/ code-server does not rewrite this and sends a request for /absproxy/5177/ to the application.

Some applications expect one method and some expect the other so we have both.

Thx !

[MinskLeo]

You might need to use /absproxy/5177/ instead.

This is the answer I was looking for. I have mostly same question, but about Remix (which also have vite under the hood). So I'm glad it works as expected now. Thanks for clarifying absproxy moment!

Answers on discussion here: #7025