Error loading vue component in vite3 #462

keyding · 2022-08-11T06:47:38Z

Build tool

Vite

Where do you see the problem?

In the browser
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/@crxjs+vite-plugin@1.0.13_vite@3.0.5/node_modules/@crxjs/vite-plugin/dist/index.mjs:248:17)
    at async file:///Users/xxx/d/__temp/vite3-crx/node_modules/.pnpm/rollup@2.77.3/node_modules/rollup/dist/es/shared/rollup.js:22096:98
    at async Queue.work (file:///Users/xxx/d/__temp/vite3-crx/node_modules/.pnpm/rollup@2.77.3/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

The text was updated successfully, but these errors were encountered:

keyding · 2022-08-11T06:53:12Z

No problem in vite 2.x

sivakumar-kailasam · 2022-08-12T20:09:03Z

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

saxoncameron · 2022-08-19T14:58:02Z

@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 · 2022-08-19T23:01:44Z

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 · 2022-08-22T14:54:14Z

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 · 2022-08-23T04:22:43Z

@jacksteamdev Thank you for your dedication to this.

saxoncameron · 2022-10-17T03:17:21Z

@jacksteamdev @crxjs/vite-plugin@2.0.0-beta.1 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 · 2022-10-24T00:31:13Z

@jacksteamdev @crxjs/vite-plugin@2.0.0-beta.1 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 · 2022-11-10T14:57:28Z

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 · 2023-01-19T08:41:18Z

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

zuishuaicc · 2023-01-19T09:03:12Z

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

zuishuaicc · 2023-01-19T09:14:14Z

@jacksteamdev I want to know that do you have solved this problem now.I still have this problem in @crxjs/vite-plugin@1.0.14.Is this my problem in my project or the plugin problem?

a-bormark · 2023-01-27T12:39:44Z

I have a similar problem.

Downgraded "@vitejs/plugin-vue" and "vite" as instructed in this thread crxjs/chrome-extension-tools#462 (comment)

xKumma · 2023-05-13T18:06:32Z

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/vite@4.3.2/node_modules/vite/dist/node/chunks/dep-7efa13d7.js:53333:21)

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

crxjs/chrome-extension-tools#462 (comment)

soulsam480 · 2024-04-14T15:46:04Z

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:

github-actions · 2025-02-25T02:39:39Z

Thanks for contributing to CRXJS! This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs within 7 days.

jacksteamdev added bug Something isn't working vite v3 labels Aug 14, 2022

jacksteamdev mentioned this issue Aug 14, 2022

CRXJS isn't fully compatible with Vite 3 #465

Merged

valleybay mentioned this issue Sep 2, 2022

Unable to load Vue or React files in content-scripts #506

Closed

2 tasks

myktra mentioned this issue Oct 3, 2022

Cannot set properties of undefined (setting 'isSelfAccepting') #518

Closed

2 tasks

joonaspaakko added a commit to joonaspaakko/audible-library-extractor that referenced this issue Mar 26, 2023

Fixed vue component generation in content script

500b448

Downgraded "@vitejs/plugin-vue" and "vite" as instructed in this thread crxjs/chrome-extension-tools#462 (comment)

ngseke added a commit to ngseke/taiwan-company-blocker that referenced this issue Nov 27, 2023

chore: downgrade vite & @vitejs/plugin-vue

73eea45

crxjs/chrome-extension-tools#462 (comment)

jacksteamdev removed the vite v3 label Jan 7, 2024

AmySteam added the vue Vue related issue label Jan 7, 2024

github-actions bot added the Stale label Feb 25, 2025

github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Mar 6, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error loading vue component in vite3 #462

Error loading vue component in vite3 #462

keyding commented Aug 11, 2022

keyding commented Aug 11, 2022

sivakumar-kailasam commented Aug 12, 2022

saxoncameron commented Aug 19, 2022

saxoncameron commented Aug 19, 2022

jacksteamdev commented Aug 22, 2022 •

edited

Loading

keyding commented Aug 23, 2022 •

edited

Loading

saxoncameron commented Oct 17, 2022

saxoncameron commented Oct 24, 2022

stefanozanella commented Nov 10, 2022

zuishuaicc commented Jan 19, 2023

zuishuaicc commented Jan 19, 2023

zuishuaicc commented Jan 19, 2023

a-bormark commented Jan 27, 2023

xKumma commented May 13, 2023 •

edited

Loading

soulsam480 commented Apr 14, 2024 •

edited

Loading

github-actions bot commented Feb 25, 2025

Error loading vue component in vite3 #462

Error loading vue component in vite3 #462

Comments

keyding commented Aug 11, 2022

Build tool

Where do you see the problem?

Describe the bug

Reproduction

Logs

System Info

Severity

keyding commented Aug 11, 2022

sivakumar-kailasam commented Aug 12, 2022

saxoncameron commented Aug 19, 2022

saxoncameron commented Aug 19, 2022

jacksteamdev commented Aug 22, 2022 • edited Loading

keyding commented Aug 23, 2022 • edited Loading

saxoncameron commented Oct 17, 2022

saxoncameron commented Oct 24, 2022

stefanozanella commented Nov 10, 2022

zuishuaicc commented Jan 19, 2023

zuishuaicc commented Jan 19, 2023

zuishuaicc commented Jan 19, 2023

a-bormark commented Jan 27, 2023

xKumma commented May 13, 2023 • edited Loading

soulsam480 commented Apr 14, 2024 • edited Loading

Problem

github-actions bot commented Feb 25, 2025

jacksteamdev commented Aug 22, 2022 •

edited

Loading

keyding commented Aug 23, 2022 •

edited

Loading

xKumma commented May 13, 2023 •

edited

Loading

soulsam480 commented Apr 14, 2024 •

edited

Loading