search

nonzzz / vite-plugin-cdn

replace module with CDN. work with vite.
MIT License
73 stars 5 forks source link

bug: 处理 vue-demi 时构建出错 #13

Closed Bisstocuz closed 11 months ago

Bisstocuz commented 11 months ago

项目没有直接安装 vue-demi，项目基础框架是 vue + vue-router + pinia

[vite-plugin-cdn] Property name expected type of string but got undefined
file: D:/My Projects/MBDownload/frontend/node_modules/.pnpm/vue-demi@0.14.5_vue@3.3.4/node_modules/vue-demi/lib/index.mjs
error during build:
TypeError: Property name expected type of string but got undefined
    at validate (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+types@7.22.5\node_modules\@babel\types\lib\definitions\utils.js:134:13)
    at Object.validate (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+types@7.22.5\node_modules\@babel\types\lib\definitions\utils.js:188:7)
    at validateField (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+types@7.22.5\node_modules\@babel\types\lib\validators\validate.js:21:9)
    at validate (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+types@7.22.5\node_modules\@babel\types\lib\validators\validate.js:15:3)
    at validateNode (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+types@7.22.5\node_modules\@babel\types\lib\builders\validateNode.js:12:27)
    at Object.identifier (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+types@7.22.5\node_modules\@babel\types\lib\builders\generated\index.js:411:36)
    at scanNamedExportsWithoutSource (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\vite-plugin-cdn2@0.9.0\node_modules\vite-plugin-cdn2\dist\chunk-WFIYNUVD.js:89:102)
    at CodeGen.overWriteExportNamedDeclaration (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\vite-plugin-cdn2@0.9.0\node_modules\vite-plugin-cdn2\dist\chunk-WFIYNUVD.js:104:11)
    at enter (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\vite-plugin-cdn2@0.9.0\node_modules\vite-plugin-cdn2\dist\chunk-WFIYNUVD.js:223:22)
    at NodePath._call (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\context.js:46:20)
    at NodePath.call (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\context.js:36:17)
    at NodePath.visit (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\context.js:82:31)
    at TraversalContext.visitQueue (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:86:16)
    at TraversalContext.visitMultiple (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:61:17)
    at TraversalContext.visit (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:107:19)
    at traverseNode (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\traverse-node.js:18:17)
    at NodePath.visit (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\context.js:88:52)
    at TraversalContext.visitQueue (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:86:16)
    at TraversalContext.visitSingle (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:65:19)
    at TraversalContext.visit (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:109:19)
    at traverseNode (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\traverse-node.js:18:17)
    at traverse (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\index.js:49:34)
    at CodeGen.transform (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\vite-plugin-cdn2@0.9.0\node_modules\vite-plugin-cdn2\dist\chunk-WFIYNUVD.js:198:20)
 ELIFECYCLE  Command failed with exit code 1.
nonzzz commented 11 months ago

pinia是基于vue-demi的。你可以参考example的设置

nonzzz commented 11 months ago

关于分析依赖这一点 没有一个很好的平衡点去判断具体应该依赖什么

Bisstocuz commented 11 months ago

pinia是基于vue-demi的。你可以参考example的设置

[vite-plugin-cdn] Cannot read properties of undefined (reading 'id')
file: D:/My Projects/MBDownload/frontend/node_modules/.pnpm/element-plus@2.3.6_vue@3.3.4/node_modules/element-plus/es/hooks/use-model-toggle/index.mjs
error during build:
TypeError: Cannot read properties of undefined (reading 'id')
    at NodePath._getKey (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\family.js:243:25)
    at NodePath.get (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\family.js:236:17)
    at NodePath._getPattern (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\family.js:272:21)
    at NodePath.get (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\family.js:238:17)
    at traverseNode (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\vite-plugin-cdn2@0.9.0\node_modules\vite-plugin-cdn2\dist\chunk-WFIYNUVD.js:164:29)
    at CodeGen.eraseDuplicatedVariableDeclaration (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\vite-plugin-cdn2@0.9.0\node_modules\vite-plugin-cdn2\dist\chunk-WFIYNUVD.js:191:7)
    at Declaration (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\vite-plugin-cdn2@0.9.0\node_modules\vite-plugin-cdn2\dist\chunk-WFIYNUVD.js:245:16)
    at NodePath._call (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\context.js:46:20)
    at NodePath.call (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\context.js:36:17)
    at NodePath.visit (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\context.js:82:31)
    at TraversalContext.visitQueue (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:86:16)
    at TraversalContext.visitMultiple (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:61:17)
    at TraversalContext.visit (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:107:19)
    at traverseNode (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\traverse-node.js:18:17)
    at NodePath.visit (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\path\context.js:88:52)
    at TraversalContext.visitQueue (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:86:16)
    at TraversalContext.visitSingle (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:65:19)
    at TraversalContext.visit (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\context.js:109:19)
    at traverseNode (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\traverse-node.js:18:17)
    at traverse (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\@babel+traverse@7.22.5\node_modules\@babel\traverse\lib\index.js:49:34)
    at CodeGen.transform (D:\My Projects\MBDownload\frontend\node_modules\.pnpm\vite-plugin-cdn2@0.9.0\node_modules\vite-plugin-cdn2\dist\chunk-WFIYNUVD.js:198:20)
 ELIFECYCLE  Command failed with exit code 1.

那这个 element-plus 的报错是什么问题呢？

nonzzz commented 11 months ago

你只需要给modules设置上vue-demi就行

Bisstocuz commented 11 months ago

你只需要给modules设置上vue-demi就行

🤣这个可以了，结果 ElementPlus 构建又出错了。

nonzzz commented 11 months ago

我等会看下。目前0.9.0版本存在一个build error 可能会导致这个问题

nonzzz commented 11 months ago

你这个只有报错看起来像是dialog组件的问题？还是你调用了element的 hook呢

nonzzz commented 11 months ago

image 我需要一个示例

Bisstocuz commented 11 months ago

image 我需要一个示例

example.zip

有两个鬼畜的问题（全程使用 pnpm，node 版本为最新 LTS）：

  1. 我上面提到的 element-plus 构建报错。
  2. 假如你把项目根目录下的 dist 目录删掉，然后再构建，会报错说 dist/favicon.ico 不存在。
nonzzz commented 11 months ago

关于element-plus报错的问题这个情况我在本地进行了最小复现以及修复。 image 这是unplugin-vue-component的注入流程。他破坏了cdn插件的解析我觉得我需要提供一个特别的方式去手动调整。

nonzzz commented 11 months ago
  1. 关于压缩插件报错。压缩插件没有任何问题。流程是cdn插件目前没法处理这个case导致了后续流程被破坏了。
nonzzz commented 11 months ago

关于解析策略这个问题cjs和esm一直都存在。这个问题我无法保证作为库作者的行为。如果cdn插件打算支持这个情况那么只能根据main和module获取上层目录的方式去解决这个情况了但是这个行为又不靠谱

nonzzz commented 11 months ago

目前的流程是这样的unplugin的自动导入element-plus写入了import { x } from 'element-plus/es' 这个行为显然是无法预期的。因为cdn的module option是根据element-plus去判断是否需要替换。显然前者找不到发生了错误

nonzzz commented 11 months ago

目前的解决方式patch-package 然后给vite-plugin-cdn2额外注入模块。dist/index.js.如果你是"type:module"用户给dist/index.mjs注入


await scanner.scanAllDependencies(); // 下一行添加

if(scanner.dependencies.has('element-plus')){
 // 如果你是ssr 就把es改成lib
 scanner.dependencies.set('element-plus/es',scanner.dependencies.get('element-plus'))
}
nonzzz commented 11 months ago

@Bisstocuz

Bisstocuz commented 11 months ago

@nonzzz

其实我并不需要将 ElementPlus 通过 CDN 引入，我将 element-plus 从 modules 中去掉的话，这种情况构建也会报错，是否有什么解决方案呢？使 modules 中没有 element-plus 也能成功构建。

nonzzz commented 11 months ago

那不行。 因为cdn插件更像是一个external+html inject的集合体。element-plus依赖于vue。那么vue相关的东西都不能被外部化。否则打包器是无法正确识别的。根据你的配置来看目前只有axios能外部化了。