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.

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?