My setup:
"react": "^18.2.0","react-dom": "^18.2.0","react-router": "^6.3.0","react-router-dom": "^6.3.0","typescript": "^5.2.2","@vitejs/plugin-basic-ssl": "~1.1.0","@vitejs/plugin-react-swc": "^3.0.1","vite": "^5.2.0","vite-plugin-svgr": "^3.3.0","vite-tsconfig-paths": "^4.0.3"With some other packages as well.
I'm converting my project from react-scripts to vite and breakpoint debugging is now bizarrely broken where it worked fine with react-scripts before.
The issue is when running from the browser, in my case Firefox, when I'm expecting to hit a breakpoint I set, VS Code will, in some cases, break in a completely unrelated place. In other cases it won't break at all. In cases where a runtime exception is thrown, the line number that appears with the exception in VS Code is wildly incorrect.
vite.config.js
import basicSsl from "@vitejs/plugin-basic-ssl";import react from "@vitejs/plugin-react-swc";import { defineConfig, loadEnv } from "vite";import svgr from "vite-plugin-svgr";import tsconfigPaths from "vite-tsconfig-paths";export default defineConfig(({ command, mode }) => { const env = loadEnv(mode, process.cwd(), ""); const base = env.PUBLIC_URL ?? "/"; return { base, define: {'process.env': env }, server: { cors: { origin: "*" }, port: 3000, host: "localhost" }, plugins: [ [basicSsl(), tsconfigPaths({ loose: true }), react(), svgr()] ], resolve: { extensions: [".js", ".jsx", ".ts", ".tsx", ".svg"] }, assetsInclude: ["**/*.md"], build: { sourcemap: true, outDir: "build" }, }});launch.json
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [ {"type": "firefox","request": "attach","name": "Attach to Firefox","url": "https://localhost:3000","webRoot": "${workspaceFolder}","host": "127.0.0.1","reloadOnAttach": false,"pathMappings": [ {"url": "https://localhost:3000","path": "${workspaceFolder}" } ],"skipFiles": ["**/node_modules/**" ] } ]}How can I get breakpoint debugging working correctly with Vite, Firefox, React and VS Code? Or do I have to stick with react-scripts?
