workPro在与vue3结合提示包有问题。

[qcfengdaai]

我在将workPro 与vue3的hello world 结合时候，提示包有问题，我按操作将，etcd3、aws-sdk等包重新安装后依旧出错。 我是按vue3的官方文档执行命令：npm create vue@latest,然后添加了 workPro的依赖包“ @grpc/grpc-js": "^1.8.12", "@juzi/wechaty": "^1.0.65", "@juzi/wechaty-puppet": "^1.0.61", "@juzi/wechaty-puppet-service": "^1.0.69", "qrcode-terminal": "^0.12.0", "vue": "^3.4.21", "wechaty": "^1.20.2""。在没有添加依赖包的时候，是可以启动 vue3的demo的。添加之后，运行错误如下，

` (base) daifeng@daif-MacBook-Pro wechaty-vue3 % npm run dev

wechaty-vue3@0.0.0 dev vite

VITE v5.2.9 ready in 684 ms

➜ Local: http://127.0.0.1:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help ✘ [ERROR] Could not resolve "etcd3"

node_modules/memory-card/dist/esm/src/storage/etcd.js:1:22:
  1 │ import { Etcd3 } from 'etcd3';
    ╵                       ~~~~~~~

You can mark the path "etcd3" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Failed to resolve entry for package "jimp". The package may have incorrect main/module/exports specified in its package.json. [plugin vite:dep-pre-bundle]

node_modules/esbuild/lib/main.js:1374:21:
  1374 │         let result = await callback({
       ╵                      ^

at packageEntryFailure (file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:48316:17)
at resolvePackageEntry (file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:48313:5)
at tryNodeResolve (file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:48083:20)
at Context.resolveId (file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:47833:28)
at Object.resolveId (file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:51110:64)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:68299:21
at async file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:48656:34
at async requestCallbacks.on-resolve (/Users/daifeng/workerspace/html/wechaty-vue3/node_modules/esbuild/lib/main.js:1374:22)
at async handleRequest (/Users/daifeng/workerspace/html/wechaty-vue3/node_modules/esbuild/lib/main.js:732:11)

This error came from the "onResolve" callback registered here:

node_modules/esbuild/lib/main.js:1293:20:
  1293 │       let promise = setup({
       ╵                     ^

at setup (file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:48636:19)
at handlePlugins (/Users/daifeng/workerspace/html/wechaty-vue3/node_modules/esbuild/lib/main.js:1293:21)
at buildOrContextImpl (/Users/daifeng/workerspace/html/wechaty-vue3/node_modules/esbuild/lib/main.js:979:5)
at Object.buildOrContext (/Users/daifeng/workerspace/html/wechaty-vue3/node_modules/esbuild/lib/main.js:788:5)
at /Users/daifeng/workerspace/html/wechaty-vue3/node_modules/esbuild/lib/main.js:2224:68
at new Promise (<anonymous>)
at Object.context (/Users/daifeng/workerspace/html/wechaty-vue3/node_modules/esbuild/lib/main.js:2224:27)
at Object.context (/Users/daifeng/workerspace/html/wechaty-vue3/node_modules/esbuild/lib/main.js:2048:58)
at prepareEsbuildOptimizerRun (file:///Users/daifeng/workerspace/html/wechaty-vue3/node_modules/vite/dist/node/chunks/dep-_QLjGPdL.js:52839:35)

The plugin "vite:dep-pre-bundle" was triggered by this import

node_modules/file-box/dist/esm/src/qrcode.js:4:17:
  4 │ import Jimp from 'jimp';
    ╵                  ~~~~~~

✘ [ERROR] Could not resolve "aws-sdk"

node_modules/memory-card/dist/esm/src/storage/s3.js:1:20:
  1 │ import AWS_SDK from 'aws-sdk';
    ╵                     ~~~~~~~~~

You can mark the path "aws-sdk" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "esdk-obs-nodejs"

node_modules/memory-card/dist/esm/src/storage/obs.js:2:22:
  2 │ import ObsClient from 'esdk-obs-nodejs';
    ╵                       ~~~~~~~~~~~~~~~~~

You can mark the path "esdk-obs-nodejs" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.`

[hcfw007]

以我的了解vue3是针对浏览器环境的前端框架，而Wechaty是运行在node中的，无法简单结合。

[hcfw007]

无反馈，问题关闭。

[huan]

@qcfengdaai We have planned to build Wechaty in the browser before, and we have an Angular component (under construction) at https://github.com/chatie/angular if you are interested.

I think the latest Angular component can be compiled to be compatible with VUE so that it can also be loaded in VUE.

Please join our Discord for future discussion (I'd love to support it in the future) if you want to run Wechaty directly in the browser.

Wechaty Discord: https://discord.gg/7q8NBZbQzt