QwikDev
[🐞] Debugging Qwik code from VSCode does not seem to respect source files
Which component is affected?
Qwik Rollup / Vite plugin
Describe the bug
Clicking on the line in VSCode to attach the breakpoint results in different file showing up when the. breakpoint hits.
- the fact that breakpoint worked means some sourcemaps are working
- the fatt that VSCode is confused means something is still missing.
https://www.loom.com/share/0aec8aea483e493083ecb4e64f3be036
Reproduction
https://www.loom.com/share/0aec8aea483e493083ecb4e64f3be036
Steps to reproduce
No response
System Info
VSCode
Additional Information
No response
As the loom is a bit fuzzy, below are my config files.
In my scenario, I want to set breakpoints depending upon results I get from the proxied backend api sever (in real-time / on-the-fly) without having to re-execute an entire clean run, which sometimes means cleaning up partial backend transactions. Without original file source-level debugging, the DX becomes a bit painful.
// vite.config.ts
import { defineConfig, Plugin } from "vite";
import { qwikVite } from "@builder.io/qwik/optimizer";
import { qwikCity } from "@builder.io/qwik-city/vite";
import tsconfigPaths from "vite-tsconfig-paths";
import { createProxyMiddleware } from "http-proxy-middleware";
import { vanillaExtractPlugin } from "styled-vanilla-extract/vite";
import { qwikReact } from "@builder.io/qwik-react/vite";
/* Backend Proxy (technique variant 1 of 3) */
function viteServerMiddlewares(): Plugin {
const configureServer: Plugin["configureServer"] = async (server) => {
server.middlewares.use(
"/api",
createProxyMiddleware({
target: "http://localhost:4000/api",
pathRewrite: { "^/api": "/" },
changeOrigin: true,
ws: true,
xfwd: true,
} as any) as any
);
};
return {
name: "dev-server-middleware",
enforce: "pre",
apply: "serve",
configureServer,
configurePreviewServer: configureServer as any,
};
}
process.env.VITE_RSC_BUILD = "true";
export default defineConfig(() => {
return {
server: {
host: true, // enable local IP, see: https://github.com/vitejs/vite/discussions/3396
/* Backend Proxy (technique variant 2 of 3) */
proxy: {
"/apix": {
target: "http://localhost:4000/api",
changeOrigin: true,
secure: false,
rewrite: (path) => path.replace(/^\/apix/, ""), // only needed if changing route
},
},
},
build: { sourcemap: true }, // <---- ATTEMPT TO GET SOURCE LEVEL DEBUGGING WORKING
plugins: [
viteServerMiddlewares(),
qwikCity(),
qwikVite(),
tsconfigPaths(),
qwikReact(),
vanillaExtractPlugin(),
],
preview: {
headers: {
"Cache-Control": "public, max-age=600",
},
},
};
});
// tsconfig.json
{
"compilerOptions": {
"allowJs": true,
"target": "ES2017",
"module": "ES2020",
"lib": [
"es2020",
"DOM",
"WebWorker",
"DOM.Iterable"
],
"jsx": "react-jsx",
"jsxImportSource": "@builder.io/qwik",
"strict": true,
"resolveJsonModule": true,
"moduleResolution": "node",
"esModuleInterop": true,
"skipLibCheck": true,
"sourceMap": true,
"incremental": true,
"isolatedModules": true,
"outDir": "tmp",
"noEmit": true,
"types": [
"node",
"vite/client"
],
"paths": {
"~/*": [
"./src/*"
]
}
},
"files": [
"./.eslintrc.cjs",
],
"include": [
"src"
]
}
This is a problem with Vite. Currently it doesn't support breakpoints or sourcemaps on the server code.
Here's my solution to this problem: https://github.com/cyco130/vavite/pull/17. It uses Node's experimental ESM loader feature, enabling sourcemaps and breakpoints on the server. The downside is, it almost certainly leaks memory. I find it an acceptable compromise since restarting the server once in a while is enough the clean up resources but your mileage may vary.
