Error loading vue component in vite3

[keyding]

Build tool

Vite

Where do you see the problem?

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

Describe the bug

Error message after running pnpm dev

  VITE v3.0.5  ready in 930 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
14:39:26 [crx] files start dist
14:39:26 [crx] error from file writer:
Error: Could not load /id-__x00__plugin-vue:export-helper-bvtig.js (imported by ../../../../../src-components-HelloWorld.vue-wi1S5.js): Unable to load "__x00__plugin-vue:export-helper" from server.
    at Object.load (file:///Users/xxx/d/__temp/vite3-crx/node_modules/.pnpm/@[email protected][email protected]/node_modules/@crxjs/vite-plugin/dist/index.mjs:248:17)
    at async file:///Users/xxx/d/__temp/vite3-crx/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:22096:98
    at async Queue.work (file:///Users/xxx/d/__temp/vite3-crx/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/rollup.js:22773:32)
14:39:26 [vite] ✨ optimized dependencies changed. reloading

Import HelloWorld.vue component in content-scripts.ts

import HelloWorld from './components/HelloWorld.vue'

console.log('content scripts loaded.');

console.log(HelloWorld);

Reproduction

https://github.com/keyding/vite3-crx

Logs

No response

System Info

System:
    OS: macOS 12.5
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 206.37 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.2 - ~/.nvm/versions/node/v16.14.2/bin/node
    npm: 8.5.0 - ~/.nvm/versions/node/v16.14.2/bin/npm
  Browsers:
    Brave Browser: 103.1.41.100
    Chrome: 104.0.5112.79
    Safari: 16.0
  npmPackages:
    @crxjs/vite-plugin: ^1.0.13 => 1.0.13 
    vite: ^3.0.0 => 3.0.5

Severity

blocking an upgrade

[keyding]

No problem in vite 2.x

[sivakumar-kailasam]

This is an issue with react on vite 3.x, probably a compatibility issue with vite 3.

[saxoncameron]

@jacksteamdev +1 I've also got this issue which is a bit of a show stopper. Everything works on build, but crashes on dev:

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 (/Users/saxoncameron/Sites/crxjs-vite-plugin-watch-mode-load-vue-bug/node_modules/@crxjs/vite-plugin/dist/index.cjs:284:17)
    at async /Users/saxoncameron/Sites/crxjs-vite-plugin-watch-mode-load-vue-bug/node_modules/@crxjs/vite-plugin/node_modules/rollup/dist/shared/rollup.js:22244:98
    at async Queue.work (/Users/saxoncameron/Sites/crxjs-vite-plugin-watch-mode-load-vue-bug/node_modules/@crxjs/vite-plugin/node_modules/rollup/dist/shared/rollup.js:22951:32)

I made a minimal reproduction repo with npx create-vue, it's just the Vue starter app injected into the top of every page via content script (the built extension works, yarn dev doesnt). I came here to report it but found this issue. In case it is helpful, here it is: https://github.com/saxoncameron/crxjs-vite-plugin-watch-mode-load-vue-bug

I tried for a long time to patch it locally with patch-package and riffling through index.cjs in node_modules following the stack trace... but no luck, the furthest I got was some circular dependency errors. AFAICT it has something to do with the plugin plugin-vue:export-helper having an id of /id-__x00__plugin-vue:export-helper-bvtig.js when it maybe ought to be /@id/__x00__plugin-vue:export-helper? Seems like it's something in the async load(id) function around L274.

[saxoncameron]

FYI @keyding @jacksteamdev this is not a problem if downgrading to:

• "vite": "2.9.15"
• "@vitejs/plugin-vue": "2.3.2"

The latest versions of each are what seems to be breaking this:

• "vite": "^3.0.2"
• "@vitejs/plugin-vue": "^3.0.1"

[jacksteamdev]

For now, I suggest downgrading as @saxoncameron describes.

CRXJS support for Vite 3 will land in or directly after #427. The file writer rewrite will fix this resolution problem at the root and simplify things immensely.

Vite made some big internal changes that affect not only path resolution, but also CRXJS test architecture. I already spent a full day figuring out what was wrong, but it will be sometime in September before I can finish both the new File Writer and full Vite 3 support.

[keyding]

@jacksteamdev Thank you for your dedication to this.

[saxoncameron]

@jacksteamdev @crxjs/[email protected] seems to resolve this issue, but curiously I get this warning in the terminal:

[plugin:crx:manifest-loader] context method emitFile() is not supported in serve mode. This plugin is likely not vite-compatible.

Doesn't seem to affect my ability to run dev mode, or the build though...?

[saxoncameron]

@jacksteamdev @crxjs/[email protected] seems to resolve this issue, but curiously I get this warning in the terminal:

[plugin:crx:manifest-loader] context method emitFile() is not supported in serve mode. This plugin is likely not vite-compatible.

Doesn't seem to affect my ability to run dev mode, or the build though...?

@jacksteamdev any idea why this warning would be popping up now, but not in the past? Did you add some plugin compatibility warnings in the beta or something? Just wondering if this ought to concern me or not

[stefanozanella]

I confirm that on the latest 2.0.0-beta.4 I don't see the warning reported by @saxoncameron, and dev mode works without problems (for now at least, I only deployed the simplest scaffold).

[zuishuaicc]

@stefanozanella so you have solve this problem loading vue component by using 2.0.0-beta.4?

[zuishuaicc]

@stefanozanella I have use 2.0.0-beta.4 solved dev mode Error problem ,but the content scrip doesn't work anymore

[zuishuaicc]

@jacksteamdev I want to know that do you have solved this problem now.I still have this problem in @crxjs/[email protected].Is this my problem in my project or the plugin problem?

[a-bormark]

I have a similar problem.

[xKumma]

EDIT: Nevermind, I managed to fix it by switching to the newest beta version of crxjs.

Hi, I'm having the exact same problem. package.json:

{ ... "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "vue": "^3.2.47" }, "devDependencies": { "@crxjs/vite-plugin": "^1.0.14", "@vitejs/plugin-vue": "^4.1.0", "autoprefixer": "^10.4.14", "postcss": "^8.4.23", "postcss-import": "^15.1.0", "tailwindcss": "^3.3.2", "vite": "^4.3.2" } }

content script:

console.log('Hello World!');

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

Error: Error: Could not load /id-__x00__plugin-vue:export-helper-bvtig.js (imported by ../../../../../../../src-App.vue-8aRva.js): Failed to load url __x00__plugin-vue:export-helper (resolved id: __x00__plugin-vue:export-helper). Does the file exist? at loadAndTransform (file:///C:/Users/hrist/0%20-%20Things/0%20-%20Programming/Web/read-out-loud/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-7efa13d7.js:53333:21)

I've confirmed that the cause is l4 in the content script

[soulsam480]

I suffered for 30 mins and figured out the fix. it now compiles and works in dev

Problem

• the vue component export helper is somehow getting re-compiled and thus their internal ID is changing
• now as it changes the native plugin is unable to recognise and shim the helper
• so the fix is to basically recognise the helper id and shim it to a new ID

const EXPORT_HELPER_RE = /plugin-vue:export-helper/

const INTERNAL_VUE_HELPER_ID = 'INTERNAL_VUE_HELPER_ID'

const helperCode = `
export default (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
}
`

function ExportHelperPlugin(): Plugin {
  return {
    name: 'vue-export-helper',
    resolveId(id) {
      if (EXPORT_HELPER_RE.test(id))
        return INTERNAL_VUE_HELPER_ID
    },
    load(id) {
      if (id === INTERNAL_VUE_HELPER_ID)
        return helperCode
    },
  }
}

ref:

• https://github.com/vitejs/vite-plugin-vue/blob/fff40f67f05763d24e8c752fa98bcd08e19f7c82/packages/plugin-vue/src/index.ts#L220
• https://github.com/vitejs/vite-plugin-vue/blob/fff40f67f05763d24e8c752fa98bcd08e19f7c82/packages/plugin-vue/src/index.ts#L231
• https://github.com/vitejs/vite-plugin-vue/blob/fff40f67f05763d24e8c752fa98bcd08e19f7c82/packages/plugin-vue/src/helper.ts#L1