search

wxt-dev / wxt

⚡ Next-gen Web Extension Framework
https://wxt.dev
MIT License
4.64k stars 199 forks source link

[@vitejs/plugin-vue] Content Script UI can't reload #538

Open tjx666 opened 8 months ago

tjx666 commented 8 months ago

Describe the bug

A clear and concise description of what the bug is.

To Reproduce

  1. git clone git@github.com:tjx666/open-related-websites.git
  2. git reset --hard ef81483a71bf2345def48aa2df423b3df1119b94
  3. pnpm dev
  4. issue1: open entrypoints/content/Search.vue and change the content, page will reload but content script doesn't updated
  5. issue2: If you try to add some code in entrypoints/content/Search.vue for example console.log(123), will cause crash and wxt dev process exit

Expected behavior

  1. content script UI can be reload.
  2. modify entrypoints/content/Search.vue should not cause wxt exit.

Screenshots

console output ``` ℹ Changed: entrypoints/content/Search.vue 10:29:45 AM entrypoints/content/Search.vue (1:7) Error when using sourcemap for reporting an error: Can't resolve original location of error. x Build failed in 166ms [10:29:45 AM] ERROR "default" is not exported by "entrypoints/content/Search.vue?vue&type=script&setup=true&lang.ts", imported by "entrypoints/content/Search.vue". file: /Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue:1:7 1: import _sfc_main from "/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue?vue&type=script&set... ^ 2: export * from "/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue?vue&type=script&setup=true&... 3: import _export_sfc from "\0plugin-vue:export-helper"; file: entrypoints/content/Search.vue:1:7 1: import _sfc_main from "entrypoints/content/Search.vue?vue&type=script&set... ^ 2: export * from "entrypoints/content/Search.vue?vue&type=script&setup=true&... 3: import _export_sfc from "\0plugin-vue:export-helper"; at getRollupError (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/parseAst.js:375:41) at error (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/parseAst.js:372:42) at Module.error (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:13651:16) at Module.traceVariable (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:14099:29) at ModuleScope.findVariable (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:11802:39) at Identifier.bind (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:7296:40) at CallExpression.bind (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:4728:28) at CallExpression.bind (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:8961:15) at ExportDefaultDeclaration.bind (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:4732:23) at Program.bind (node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:4728:28) file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/wxt@0.17.7/node_modules/wxt/dist/cli.js:283 throw Error(`Failed to build ${groupNames.join(", ")}`, { cause: err }); ^ Error: Failed to build content at buildEntrypoints (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/wxt@0.17.7/node_modules/wxt/dist/cli.js:283:13) at async rebuild (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/wxt@0.17.7/node_modules/wxt/dist/cli.js:3053:21) at async file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/wxt@0.17.7/node_modules/wxt/dist/cli.js:3532:37 { [cause]: Error [RollupError]: "default" is not exported by "entrypoints/content/Search.vue?vue&type=script&setup=true&lang.ts", imported by "entrypoints/content/Search.vue". file: /Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue:1:7 1: import _sfc_main from "/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue?vue&type=script&set... ^ 2: export * from "/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue?vue&type=script&setup=true&... 3: import _export_sfc from "\0plugin-vue:export-helper"; at getRollupError (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/parseAst.js:375:41) at error (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/parseAst.js:372:42) at Module.error (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:13651:16) at Module.traceVariable (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:14099:29) at ModuleScope.findVariable (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:11802:39) at Identifier.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:7296:40) at CallExpression.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:4728:28) at CallExpression.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:8961:15) at ExportDefaultDeclaration.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:4732:23) at Program.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/rollup@4.12.1/node_modules/rollup/dist/es/shared/node-entry.js:4728:28) { binding: 'default', code: 'MISSING_EXPORT', exporter: '/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue?vue&type=script&setup=true&lang.ts', id: '/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue', url: 'https://rollupjs.org/troubleshooting/#error-name-is-not-exported-by-module', pos: 7, loc: { column: 7, file: '/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue', line: 1 }, frame: '1: import _sfc_main from "/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue?vue&type=script&set...\n' + ' ^\n' + '2: export * from "/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue?vue&type=script&setup=true&...\n' + '3: import _export_sfc from "\\0plugin-vue:export-helper";', watchFiles: [ 'package.json', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/wxt@0.17.7/node_modules/wxt/dist/client.js', '/Users/yutengjing/code/open-related-website/entrypoints/content/index.ts', '/Users/yutengjing/code/open-related-website/package.json', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/wxt@0.17.7/node_modules/wxt/dist/sandbox.js', '/Users/yutengjing/code/open-related-website/entrypoints/content/Search.vue', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/vue@3.4.21_typescript@5.4.2/node_modules/vue/dist/vue.runtime.esm-bundler.js', '/Users/yutengjing/code/open-related-website/assets/main.css', '/Users/yutengjing/code/open-related-website/entrypoints/background.ts', '/Users/yutengjing/code/open-related-website/entrypoints/popup/main.ts', '/Users/yutengjing/code/open-related-website/entrypoints/content/adapters/BaseAdapter.ts', '/Users/yutengjing/code/open-related-website/entrypoints/content/adapters/WebIdeAdapter.ts', '/Users/yutengjing/code/open-related-website/entrypoints/content/adapters/index.ts', '/Users/yutengjing/code/open-related-website/entrypoints/popup/App.vue', '/Users/yutengjing/code/open-related-website/entrypoints/popup/index.html', '/Users/yutengjing/code/open-related-website/components/HelloWorld.vue', '/Users/yutengjing/code/open-related-website/tailwind.config.ts', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@webext-core+match-patterns@1.0.3/node_modules/@webext-core/match-patterns/lib/index.js', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/wxt@0.17.7/node_modules/wxt/dist/chunk-FNTE2L27.js', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@webext-core+isolated-element@1.1.1/node_modules/@webext-core/isolated-element/lib/index.js', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@vue+runtime-dom@3.4.21/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/webextension-polyfill@0.10.0/node_modules/webextension-polyfill/dist/browser-polyfill.js', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@vue+shared@3.4.21/node_modules/@vue/shared/dist/shared.esm-bundler.js', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@vue+runtime-core@3.4.21/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js', '/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@vue+reactivity@3.4.21/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js' ] } } Node.js v18.18.0   ~/code/open-related-website   main wip !1 ✘ 1  8.7s  18.18.0  0.0.0 ❯ ```

Environment

  System:
    OS: macOS 14.4
    CPU: (8) arm64 Apple M2
    Memory: 631.22 MB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.18.0 - ~/Library/Caches/fnm_multishells/23259_1710037298460/bin/node
    Yarn: 1.22.21 - ~/Library/Caches/fnm_multishells/23259_1710037298460/bin/yarn
    npm: 10.5.0 - ~/Library/Caches/fnm_multishells/23259_1710037298460/bin/npm
    pnpm: 8.15.4 - ~/Library/Caches/fnm_multishells/23259_1710037298460/bin/pnpm
    bun: 1.0.30 - /opt/homebrew/bin/bun
  Browsers:
    Chrome: 122.0.6261.112
    Edge: 122.0.2365.80
    Safari: 17.4
  npmPackages:
    wxt: ^0.17.7 => 0.17.7
aklinker1 commented 8 months ago

Hmm, seems related to the other report of the Vue plugin behaving weird.

270

I'll try and debug this more soon...

zeroxer commented 7 months ago

I encountered the same problem.

keyding commented 7 months ago

I'm having this problem too.

wuzequanyouzi commented 7 months ago

我拉了你main分支最新代码，跑了一下，仍然存在这个问题，你可以在wxt.config.ts文件中，将vite的打包配置build.sourcemap 先改为false，可以解决这个问题。 @tjx666

606

keyding commented 7 months ago

@wuzequanyouzi I tested it, no problem, thanks.

In wxt.config.ts, add vite.build.sourcemap: false.

import { defineConfig } from 'wxt';
import vue from '@vitejs/plugin-vue';

// See https://wxt.dev/api/config.html
export default defineConfig({
  imports: {
    presets: ['vue'],
    addons: {
      vueTemplate: true,
    },
  },
  vite: () => ({
    plugins: [vue()],
    // Add here 👏👏👏
    build: {
      sourcemap: false
    }
  }),
}
aklinker1 commented 7 months ago

Good find @wuzequanyouzi! Vue seems to be the only plug-in with this problem, I need to explore their source code to see why it breaks

wuzequanyouzi commented 7 months ago

@aklinker1 Hi! I think I know why. I checked the @ vite/plugin vue source code and found that it's because wxt starts the vite server, and every time the file changes, wxt executes the vite build. Are these two using the same vite context? Due to file changes, vite triggers the plugin vue's handleHotUpdate method and sets the code change cache. Later, when wxt executes vite build, the script obtained is the cache set by handleHotUpdate, resulting in an error. But I still don't understand why there is no cache after setting sourceMap to false。

I wonder if it's possible to use a separate configuration in the vite build of wxt? Context sharing for separating vite server and vite build?

aklinker1 commented 7 months ago

The reason WXT's vite option is a function is to generate new instances of each plugin for each build to avoid this exact issue with caching... But if Vue is storing the cache globally, and all plugin instances share a single cache, then it's a problem. After your comment, I'm assuming they're using some kind of global cache?

wuzequanyouzi commented 7 months ago

https://vitejs.dev/guide/api-javascript.html#createserver
image I think the reason for the problem lies here

aklinker1 commented 7 months ago

Hmm, WXT should be setting the mode explicitly. See https://github.com/wxt-dev/wxt/blob/main/src%2Fcore%2Fbuilders%2Fvite%2Findex.ts#L39

Interesting idea to spawn a child process, that would definitely break the shared cache. Would be difficult to control though :/

Idered commented 5 months ago

I have a similar issue which is partially fixed by sourcemap: false

With sourcemap: false, it somehow works, but hot reload is broken in some files

With sourcemap: true, this error shows up at the start

11:56:01 AM [vite] Internal server error: Transform failed with 1 error:
/Users/kasper/Code/GLIMPSE-LENS/components/sidebar/Container.vue:206:7: ERROR: Multiple exports with the same name "default"
  Plugin: vite:vue
  File: /Users/kasper/Code/GLIMPSE-LENS/components/sidebar/Container.vue:206:7

  Multiple exports with the same name "default"
  204|  })
  205|  import _export_sfc from 'plugin-vue:export-helper'
  206|  export default /*#__PURE__*/_export_sfc(_sfc_main, [['render',_sfc_render],['__file',"/Users/kasper/Code/GLIMPSE-LENS/components/sidebar/Container.vue"]])
     |         ^

      at failureErrorWithLog (/Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:1651:15)
      at /Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:849:29
      at responseCallbacks.<computed> (/Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:704:9)
      at handleIncomingPacket (/Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:764:9)
      at Socket.readFromStdout (/Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/esbuild@0.20.2/node_modules/esbuild/lib/main.js:680:7)
      at Socket.emit (node:events:520:28)
      at Socket.emit (node:domain:488:12)
      at addChunk (node:internal/streams/readable:559:12)
      at readableAddChunkPushByteMode (node:internal/streams/readable:510:3)
      at Readable.push (node:internal/streams/readable:390:5)