[🐞] Debugging Qwik code from VSCode does not seem to respect source files

[mhevery]

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.

1. the fact that breakpoint worked means some sourcemaps are working
2. 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

[n8sabes]

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"
  ]
}

[cyco130]

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: cyco130/vavite#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.

[manucorporat]

This should be greatly improved in the latest release Vite 4.2!