Description of error in console and background: I have a Vue 3 project I've been working on for a while now, and it's been giving me the same error for weeks, and I've never been able to fix it with a moderate amount of searching. It seems to be related to bootstrap but is referencing something called "devtools" which may be unrelated to the project when it will eventually run outside of VS Code. I'm not sure if VS code is causing it, or if the browser is causing it, or if it is Vue not playing well with bootstrap somehow.
Console Error: DevTools failed to load source map: Could not load content for http://127.0.0.1:5173/bootstrap.min.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
The error appears immediately in the console when the project is started or refreshed.
Here is how I'm using bootstrap in "main.js":
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";
const app = createApp(App);
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap"
app.use(createPinia());
app.use(router);
app.mount("#app");
IMPORTANT NOTE: when I experimented and removed the line:
import "bootstrap/dist/css/bootstrap.min.css"
... the error disappeared but then bootstrap also stopped working. So removing that line does not appear to be a viable solution to getting rid of the error, since it also disrupts the usage of bootstrap classes.
I also have typescript enabled for this project, but it doesn't appear to be a TS coded error of any kind.
The error does not appear to affect the functioning of the project in any way, and bootstrap classes are successfully available; this is why I haven't bothered to create a stackoverflow issue about it until now.
Hopefully somebody else that's noticed this in a Vue 3 - bootstrap project can let me know if they've also noticed the same thing, and (even better), how to fix it or make the error message go away.