Repository navigation
[Bug]: vite can't load css #6212
Description
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
- install code-server v4.12.0 by Standalone releases, expose docker port
9998:8080 - enter the docker container and run command
/root/code-server/bin/code-server - visit code-server by
http://localhost:9998/?folder=/mnt - 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
- change the
vite.config.tslike 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,
},
})- open the code-server vscode cmd, run command
npm run dev - 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
Activity
code-asher commentedon May 16, 2023
You might need to use
/absproxy/5177/instead.wall-wxk commentedon May 17, 2023
Thx. It Work!
Could you tell me the difference between
/proxy/5177and/absproxy/5177/?code-asher commentedon May 18, 2023
/proxyrewrites while/absproxydoes not. If you are familiar with NGINX it is similar to how a trailing slash inproxy_passbehaves.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 commentedon May 19, 2023
Thx !
MinskLeo commentedon Oct 7, 2024
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
absproxymoment!Answers on discussion here: #7025