Unable to load Vue or React files in content-scripts

[valleybay]

Build tool

Vite

Where do you see the problem?

• [ ] In the browser
• [X] In the terminal

Describe the bug

When attempting to inject a Vue-component into a pages HTML via a content script I am unable to import .vue files into the Javascript file.

From content-script.js

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

const div = document.createElement("div")
document.body.insertBefore(div, document.body.firstChild);

new Vue({
   el: div,
   render: h => { return h(App); }
});

The error (from the attached log) happens as soon as I import App from './App.vue'.

Reproduction

From vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json'
import { resolve } from 'path'

// https://vitejs.dev/config/

export default defineConfig({
  plugins: [
    vue(),
    crx({ manifest })
  ]
})

Logs

10:47:48 AM [crx] error from file writer:
Error: Could not load /id-__x00__plugin-vue:export-helper-bvtig.js (imported by ../../../../src-App.vue-8aRva.js): Unable to load "__x00__plugin-vue:export-helper" from server.
    at Object.load (file:///Users/christiandalsvaag/d/sxq-extension/node_modules/@crxjs/vite-/dist/index.mjs:251:17)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async file:///Users/christiandalsvaag/d/sxq-extension/node_modules/@crxjs/vite-plugin/node_modules/rollup/dist/es/shared/rollup.js:22113:98
    at async Queue.work (file:///Users/christiandalsvaag/d/sxq-extension/node_modules/@crxjs/vite-plugin/node_modules/rollup/dist/es/shared/rollup.js:22820:32)
10:47:52 AM [crx] files start dist
10:47:52 AM [crx] error from file writer:
Error: Could not load /id-__x00__plugin-vue:export-helper-bvtig.js (imported by ../../../../src-App.vue-8aRva.js): Unable to load "__x00__plugin-vue:export-helper" from server.
    at Object.load (file:///Users/christiandalsvaag/d/sxq-extension/node_modules/@crxjs/vite-plugin/dist/index.mjs:251:17)
    at async file:///Users/christiandalsvaag/d/sxq-extension/node_modules/@crxjs/vite-plugin/node_modules/rollup/dist/es/shared/rollup.js:22113:98
    at async Queue.work (file:///Users/christiandalsvaag/d/sxq-extension/node_modules/@crxjs/vite-plugin/node_modules/rollup/dist/es/shared/rollup.js:22820:32)

System Info

System:
    OS: macOS 12.3.1
    CPU: (8) x64 Apple M1
    Memory: 16.84 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.17.0 - ~/.nvm/versions/node/v16.17.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.15.0 - ~/.nvm/versions/node/v16.17.0/bin/npm
  Browsers:
    Brave Browser: 98.1.35.104
    Chrome: 105.0.5195.52
    Edge: 105.0.1343.25
    Firefox: 104.0.1
    Safari: 15.4
  npmPackages:
    @crxjs/vite-plugin: ^1.0.14 => 1.0.14
    vite: ^3.0.7 => 3.0.9

Severity

blocking all usage of RPCE

[bigandy]

I had the a similar issue but with React component as the content script.

It did work for me when I built the extension by running npm run build but not when npm run dev.

[valleybay]

Thanks for your comment @bigandy! I have verified that this is also the case for me!

Any one have any thoughts on what it would take to solve this for npm run dev? HMR is essential

[valleybay]

I now see that this is a duplicate of #462