官方脚手架创建的低代码组件，pnpm安装依赖后，启动报错，npm安装没问题

[Alubb77]

官方脚手架创建的低代码组件，pnpm安装缺少依赖，启动报错，建议修复。这往往意味着很多依赖的声明并不符合规范。如果不好修复，可以给出需要手动补充的依赖，感谢！

复现方式：
脚手架初始化一个组件：npm init @alilc/element lpd-com-test-2
选择：组件/物料
选择包模式：react-单组件
初始化完成，安装依赖：pnpm i
安装完成后启动项目：npm run start 报错如下

    ERROR in ./node_modules/_component_demo/demo-entry.js
    Module not found: Error: Can't resolve 'regenerator-runtime/runtime' in '/Users/alsc/Documents/lowCode/lpd-com-test-2/node_modules/_component_demo'
     @ ./node_modules/_component_demo/demo-entry.js 215:0-37
     @ multi ./node_modules/_component_demo/demo-entry.js

启动低代码项目：npm run lowcode:dev 报错如下

ERR! (undefined) ./.tmp/preview.jsx
ERR! Module not found: Can't resolve '@alilc/lowcode-react-renderer' in '/Users/alsc/Documents/lowCode/lpd-com-test-2/.tmp'
ERR! 
ERR! (undefined) ./.tmp/preview.jsx
ERR! Module not found: Can't resolve '@alilc/lowcode-utils' in '/Users/alsc/Documents/lowCode/lpd-com-test-2/.tmp'
ERR! 
ERR! (undefined) ./.tmp/index.jsx
ERR! Module not found: Can't resolve 'lodash/mergeWith' in '/Users/alsc/Documents/lowCode/lpd-com-test-2/.tmp'
ERR! 
ERR! (undefined) ./.tmp/view.js
ERR! Module not found: Can't resolve 'style-loader' in '/Users/alsc/Documents/lowCode/lpd-com-test-2'
ERR! 
ERR! (undefined) ./.tmp/default.view.js
ERR! Module not found: Can't resolve 'style-loader' in '/Users/alsc/Documents/lowCode/lpd-com-test-2'

pnpm版本：6.32.9
node版本：14.21.3

[LeoYuan]

这几个依赖在 build-plugin-lowcode 里都有 dep 声明，pnpm 却没有安装，请问是哪里不规范呢？

[eternalsky]

这个问题我看一下，目前官方主要支持 npm/cnpm 的安装使用，pnpm 使用较少因此欢迎 pnpm 的重度使用用户帮我们发现问题以及提 pr 修复。我们自身对 pnpm 的支持处于低优先级

[github-actions]

Hello @Alubb77. We totally like your proposal/feedback, PR wanted。

你好 @Alubb77，我们完全同意你的提议/反馈，欢迎 PR。

[Alubb77]

这几个依赖在 build-plugin-lowcode 里都有 dep 声明，pnpm 却没有安装，请问是哪里不规范呢？

你的语气稍微有点强硬，不过我还是理解为你在和我讨论问题，我这边稍微有点理解，但是我pnpm学习时间也不长，有问题请指出。

首先你指出的依赖并没有安装的问题，实际上他是安装了，pnpm node_modules 下的内容我理解是个索引，所有的依赖实际安装在.pnpm 目录下，如下图所示。

那既然安装了，为啥还是报错未找到呢

我理解可能是因为pnpm解决了幽灵依赖的问题
幽灵依赖例如：你引入了A包和B包，同时A包里面又引入了C包，这时候你在B包中是可以使用C包的内容的（虽然并未声明）。
这实际上是不规范的，一旦A包修改了C包的版本，或者删除C包的依赖，都可能会导致B包报错。

所以虽然你在某个包中声明了@alilc/lowcode-react-renderer，但是在使用的地方/Users/alsc/Documents/lowCode/lpd-com-test-2/.tmp 并没有声明 @alilc/lowcode-react-renderer ，在pnpm中会报错。

[eternalsky]

@Alubb77 感谢你的回复，不过这里面有些错误我要指出一下，首先这个报错不是 pnpm 报的，而是 webpack 报的。webpack 按照他的依赖解析规则没有找到这个包（注意在 npm 和 cnpm 中不存在问题），而为什么找不到这个包呢，是因为在 node_modules 下确实没有 @alilc/lowcode-react-renderer 这个目录（虽然 .pnpm 里有，但这个 webpack 是不认的，他只认官方的目录结构），那为什么他没有生成对应的目录，这个我也还没搞清楚，有想法的同学，可以下面回复来帮助问题解决~ 。第二个错误是这不是幽灵依赖问题，@alifd/build-plugin-lowcode 直接依赖了 @alilc/lowcode-react-renderer（代码和 package.json），而且在代码中直接使用了他，这是一个标准的自依赖，而不是一个 B 使用 A 依赖的 C 的问题。

[Alubb77]

@Alubb77 感谢你的回复，不过这里面有些错误我要指出一下，首先这个报错不是 pnpm 报的，而是 webpack 报的。webpack 按照他的依赖解析规则没有找到这个包（注意在 npm 和 cnpm 中不存在问题），而为什么找不到这个包呢，是因为在 node_modules 下确实没有 @alilc/lowcode-react-renderer 这个目录（虽然 .pnpm 里有，但这个 webpack 是不认的，他只认官方的目录结构），那为什么他没有生成对应的目录，这个我也还没搞清楚，有想法的同学，可以下面回复来帮助问题解决~ 。第二个错误是这不是幽灵依赖问题，@alifd/build-plugin-lowcode 直接依赖了 @alilc/lowcode-react-renderer（代码和 package.json），而且在代码中直接使用了他，这是一个标准的自依赖，而不是一个 B 使用 A 依赖的 C 的问题。

你说的很有道理，不过 @alifd/build-plugin-lowcode 直接依赖了 @alilc/lowcode-react-renderer，而且在代码中使用了他，这句话没错，但是报错的位置并不在@alifd/build-plugin-lowcode中，而是在 .tmp 的 preview.jsx。

而在这个位置运行，读取依赖会读取组件工程本身的依赖，@alifd/build-plugin-lowcode 中声明的依赖在此处是读取不到的，所以报错是对的，而且也符合直觉，因为在此处没有声明却直接使用了，这就是我说的幽灵依赖的问题。

另外我想了解一下 .tmp 目录作用是什么，如果只是个中间态产物，能不能把这个中间态产物收在 @alifd/build-plugin-lowcode 内部生成，这样自然所有的依赖都是有的。这个方案是我不了解的情况下想的，有问题请指出。

[eternalsky]

@Alubb77 你说的是有道理的，收到包里也许能解决问题（但考虑到 pnpm 的 symbolLink，这个可能还会产生其他问题），这个 .tmp 目录是一些临时生成的入口文件，放在一个临时目录里。一般来说，都会考虑使用 .node_modules 或者系统级的临时目录里去做生成，在 node_modules 下也是为了更好地利用 npm flattern dependencies 的特性。

[eternalsky]

一般来说，临时文件很少有直接放在自己包下面这种操作的

[Alubb77]

一般来说，临时文件很少有直接放在自己包下面这种操作的

是很奇怪，我先选择把这几个依赖加在组件的package.json，感觉除非不要这几个中间态文件，不然没有什么很优雅的实现方案。看看能不能不要中间态直接生成最终产物。

[LgnMs]

pnpm安装以前的项目大概率都会遇到问题

[wywppkd]

首先 pnpm 的做法没有问题, 它只是解决了幽灵依赖的问题, 我们应该从代码层面进行规范
既然中间态产物 .tmp 依赖了 @alilc/lowcode-react-renderer 这些包, 建议还是先将这些依赖包放到物料项目中, 优先解决这个问题
后面如果有更好的解决办法再考虑替换

[eternalsky]

首先 pnpm 的做法没有问题, 它只是解决了幽灵依赖的问题, 我们应该从代码层面进行规范 既然中间态产物 .tmp 依赖了 @alilc/lowcode-react-renderer 这些包, 建议还是先将这些依赖包放到物料项目中, 优先解决这个问题 后面如果有更好的解决办法再考虑替换

解决幽灵依赖可以，但不应该改变 npm 原有的一些逻辑，比如 flatten 的逻辑也破坏掉了。如果这些都放到物料里去的话，devtool 本身的独立性就被破坏了，比如 tool 加一点依赖跟这里逻辑相关的，比如上面报错里的 loader。这是不靠谱的，最多做的是将这个 .tmp 挪到 tools 里，但这可能引起其他问题。