Webpack devtool eval-source-map causing browser infinite loading

Question

We were sick of the way we had to debug the TypeScript in our .vue files when running in Visual Studio 2022 so we tried adding the setting devtool: 'eval-source-map' in our vue.config.js like so:

configureWebpack: {
    **devtool: 'eval-source-map',**
    resolve: {
        alias: {
            "@": path.resolve(__dirname, vueSrc)
        },
        extensions: ['.js', '.vue', '.json']
    }
}

For some reason all possible values for the devtool setting work .. but they all generate weird code causing debugging to become an almost impossible job. Setting it to 'eval-source-map' shows the actual code we've written .. which is perfect, but the browser now gets an infinite loader when we click on another link or refresh the page. The only thing we can do is close the browser and begin all over.

We currently have the following setup:

"devDependencies": {
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1"
}

Any help is much appreciated!