关于引用了第三方库之后打包失败的问题

How To
1

背景&操作步骤

做了什么操作后，出现的该问题

1.在package.json种引入了第三方包

image
image1131×414 45 KB

2、不确定是否引入正确，但是在服务器的/.pnpm-store/v10种找到类似这样的json文件
image
image861×141 11.8 KB

3、在自建组件保存后，在服务器日志中有报错，提示打包失败，无法解析包文件
image
image1854×111 23.1 KB

image

2

这个不应该放到devDependencies 下面吧， 放到dependencies下面。 然后先注释掉引用 @xyflow/react的地方。保存触发安装依赖，然后再在使用的页面中放开注释，看看行不行。

3

对不起，瞎了我的狗眼。
太晚了，没注意。

不好意思，麻烦你们了

4

还是有一个bug，就是正确引入第三方包的之后，打包还是报错。

package.json新增的内容如下：
“dependencies”: {
“@xyflow/react”: “12.9.0”
},

具体错误日志如下：
Traceback (most recent call last):
File “jit.elements.element”, line 23, in wrapper
File “interceptors.Http.lifecycle”, line 66, in onAppExit
File “jit.runenvirons.web”, line 246, in handleAsf
File “jit.elements.stack”, line 253, in handleRequest
File “jit.elements.app”, line 1089, in handleRequest
File “jit.elements.element”, line 324, in requestHandle
File “jit.elements.element”, line 36, in wrapper
File “jit.elements.element”, line 34, in wrapper
File “services.Meta.base”, line 93, in requestHandle
File “services.Meta.base”, line 64, in wrapper
File “services.ElementSvc.service”, line 43, in wrapper
File “jit.commons.buildServer.buildServer”, line 36, in wrapper
File “jit.commons.buildServer.buildServer”, line 297, in buildApp
File “jit.commons.buildServer.buildServer”, line 287, in buildApp
File “jit.commons.buildServer.buildServer”, line 273, in exec
File “jit.commons.buildServer.buildServer”, line 265, in command
jit.errcode.Code: {“code”: 801001, “reason”: “打包失败Error: Build failed with 1 error:
node_modules/.pnpm/@xyflow+react@12.9.0_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/@xyflow/react/dist/esm/index.js:2:36: ERROR: Could not resolve “react/jsx-runtime””}

但是react/jsx-runtime应该是React包带的内容吧？所以还是需要寻求官方大佬的协助。

5

@zhushengguang 回复下这个问题

6

经过测试发现，按照下面的方式引入ReactFlow才行

import  { Background, NodeProps, ReactFlow } *from* '@xyflow/react';

之前是

import  ReactFlow ，{ Background, NodeProps } *from* '@xyflow/react';
7

在调试自定义前端组件的小技巧：
1 可以在你的桌面jitNode的 0_0_0目录（这个目录是你应用的初始版本， 如果你的应用发布了， 变更了版本，要到对应的版本目录下）下， 打开终端，首先执行下面命令安装jit-builder

 npm i -g jit-builder@https://jit-front.oss-cn-hangzhou.aliyuncs.com/pkg/jit-builder@latest.tgz

2 执行pnpm i 命令安装依赖
3 pnpm dev命令， 这样前端代码改动后就能自动打包， 页面直接刷新就能生效。

8

非常感谢您的帮助，这个调试小技巧非常有用。

您指出的问题是一个问题，但是最核心的并不是您指出的问题。

我采取了两个步骤后，问题解决了（因为我不能百分百确认是哪个步骤真正起到决定性作用）

在本地桌面端：
我执行了

rm -r -fo node_modules
pnpm install --shamefully-hoist

就可以正常编译了。

在服务器端：
1、我执行了

rm -r -fo node_modules
pnpm install --shamefully-hoist
但是没有生效（可能是编译打包等没有完成，我就刷新页面验证结果，但是我不确定）

2、基于第一步没有解决问题，我就在package.json中添加了两个依赖
“dependencies”: {
“@xyflow/react”: “12.9.0”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”
},

过了一会，打包就成功了。

分享出来参考。