reactjs - VS Code Breakpunktfelsökning med Typescript, React, Vite och Firefox orsakar felaktiga brytpunkter och visar fel radnummer

Min uppställning:

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

Med några andra paket också.

Jag konverterar mitt projekt från react-scripts till vite och brytpunktsdebuggning är nu konstigt nog trasig där det fungerade bra med react-scripts tidigare.

Problemet uppstår när man kör från webbläsaren, i mitt fall Firefox, när jag förväntar mig att träffa en brytpunkt jag har satt, kommer VS Code i vissa fall att bryta på en helt orelaterad plats. I andra fall bryts det inte alls. I de fall där ett körningsundantag kastas, är radnumret som visas med undantaget i VS Code helt felaktigt.

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

Hur kan jag få felsökning med brytpunkter att fungera korrekt med Vite, Firefox, React och VS Code? Eller måste jag hålla mig till react-scripts?