Source Map Errors

[robertdavid010]

Describe the bug The console for both the background process, the content script (when used), and the popup all show a source map error:

Related issue (no reason for closing, or solution given): https://github.com/adambullmer/vue-cli-plugin-browser-extension/issues/78

Potentially related issue: https://github.com/adambullmer/vue-cli-plugin-browser-extension/issues/98

DevTools failed to load source map: Could not load content for chrome-extension://cbpkheoflnenicgjfbglanilmpicnnce/js/browser-polyfill.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

To Reproduce

Create a new project and add browser-extension

1. vue create my-project (V3 basic)
2. cd my-project
3. vue add browser-extension
4. Fix linting errors
5. npm run serve
6. Add the /dist folder as an 'unpacked' extension to chrome
7. Open the console for the background by clicking on 'background page' for the extension atchrome://extensions/ url.
8. Right click the browser extension popup and select 'inspect'

Expected behavior There should not be source map errors on default clean install?

Name	Version
vue-cli-plugin-browser-extension	0.25.2
Operating System	Mac OS 10.14.6
Node	Installed with 14.15.1, additionally tested 16.1.0
NPM/Yarn	7.11.2
vue-cli	4.5.13
vue-cli-service	0.14.6
browser	Chrome

[joeltok]

For those who came here thinking this was the reason why none of the extension pages were being loaded on a clean install, this error does not cause that.

Instead, for me I created the project using Vue3, while the scaffolding code seems to be using the Vue2 syntax (correct me if I'm wrong). What I did to fix this was to replace each main.js file's code from

import Vue from 'vue'
import App from './App.vue'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

to

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
app.mount("#app")

This allowed the content pages to render (for me). Hope this helps.