search

crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.56k stars 177 forks source link

Error loading vue component in vite3 #462

Open keyding opened 1 year ago

keyding commented 1 year ago

Build tool

Vite

Where do you see the problem?

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

keyding commented 1 year ago

No problem in vite 2.x

sivakumar-kailasam commented 1 year ago

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

saxoncameron commented 1 year ago

@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.

image

saxoncameron commented 1 year ago

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

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

jacksteamdev commented 1 year ago

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 commented 1 year ago

@jacksteamdev Thank you for your dedication to this.

saxoncameron commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

zuishuaicc commented 1 year ago

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

zuishuaicc commented 1 year ago

@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 commented 1 year ago

I have a similar problem.

xKumma commented 1 year ago

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

soulsam480 commented 2 months ago

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

Problem

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: