wxt
wxt copied to clipboard
wxt-dev
[@vitejs/plugin-vue] Content Script UI can't reload
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
git clone [email protected]:tjx666/open-related-websites.gitgit reset --hard ef81483a71bf2345def48aa2df423b3df1119b94pnpm dev- issue1: open
entrypoints/content/Search.vueand change the content, page will reload but content script doesn't updated - issue2: If you try to add some code in
entrypoints/content/Search.vuefor exampleconsole.log(123), will cause crash and wxt dev process exit
Expected behavior
- content script UI can be reload.
- modify
entrypoints/content/Search.vueshould 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/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
at error (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
at Module.error (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13651:16)
at Module.traceVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14099:29)
at ModuleScope.findVariable (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:11802:39)
at Identifier.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7296:40)
at CallExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4728:28)
at CallExpression.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:8961:15)
at ExportDefaultDeclaration.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4732:23)
at Program.bind (node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4728:28)
file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/wxt/dist/cli.js:283:13)
at async rebuild (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/wxt/dist/cli.js:3053:21)
at async file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/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/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
at error (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/parseAst.js:372:42)
at Module.error (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:13651:16)
at Module.traceVariable (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:14099:29)
at ModuleScope.findVariable (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:11802:39)
at Identifier.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:7296:40)
at CallExpression.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4728:28)
at CallExpression.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:8961:15)
at ExportDefaultDeclaration.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:4732:23)
at Program.bind (file:///Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/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/[email protected]/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/[email protected]/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/[email protected][email protected]/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/@[email protected]/node_modules/@webext-core/match-patterns/lib/index.js',
'/Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/wxt/dist/chunk-FNTE2L27.js',
'/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@[email protected]/node_modules/@webext-core/isolated-element/lib/index.js',
'/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js',
'/Users/yutengjing/code/open-related-website/node_modules/.pnpm/[email protected]/node_modules/webextension-polyfill/dist/browser-polyfill.js',
'/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@[email protected]/node_modules/@vue/shared/dist/shared.esm-bundler.js',
'/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@[email protected]/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js',
'/Users/yutengjing/code/open-related-website/node_modules/.pnpm/@[email protected]/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
Hmm, seems related to the other report of the Vue plugin behaving weird.
#270
I'll try and debug this more soon...
我拉了你main分支最新代码，跑了一下，仍然存在这个问题，你可以在wxt.config.ts文件中，将vite的打包配置build.sourcemap 先改为false，可以解决这个问题。 @tjx666
#606
@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
}
}),
}
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
@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?
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?
https://vitejs.dev/guide/api-javascript.html#createserver
I think the reason for the problem lies here
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 :/
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/[email protected]/node_modules/esbuild/lib/main.js:1651:15)
at /Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:849:29
at responseCallbacks.<computed> (/Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:704:9)
at handleIncomingPacket (/Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:764:9)
at Socket.readFromStdout (/Users/kasper/Code/GLIMPSE-LENS/node_modules/.pnpm/[email protected]/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)
