leaflet-defaulticon-compatibility | Leaflet Default Icon options from CSS | User Interface library

It could be that some dependency of yours is using ES6 syntax.

By default babel-loader ignores all files inside node_modules. If you want to explicitly transpile a dependency with Babel, you can list it in this option

transpileDependencies

You need to find out which one it is and add it to transpileDependencies - vue.config.js

Also the error message is very strange - function(e){let{existsSync:r,readFileSync:i} - both existsSync and readFileSync look like Node API. So check you don't use any Node package for browser app (for example node-fetch is definitely Node only lib and will not work inside the browser)

This is neither a clean solution, nor one that actually fixes the problem, it just circumvents it.

In the end, what you're trying to do is load these 2 image files. Those should come from the HTTP server that is distributing your frontend but that is pretty precisely what leaflet is breaking. Nothing is stopping you from loading these 2 image files from a different place, like the HTTP Server that serves your backend.

Thus, I have uploaded the 2 image files to my backend server and then replaced the defined DefaultIcon of Leaflet's Marker prototype with one whose URL points to my backend server. That fixed it for me.