[Bug] 0.1.13 not working properly under vben-admin

Question

[Bug] 0.1.13 not working properly under vben-admin

guinanlin opened this issue 21 days ago · comments

hawk commented 21 days ago

在您提交此问题之前，您是否检查了以下内容？

这真的是个问题吗？
我已经在 Github Issues 中搜索过了，但没有找到类似的问题。

受影响的包和版本

0.1.13

复现链接

可以参见访问的路径: https://3c9y4d-5173.csb.app/#/comp/table/UniverSheet

复现的链接地址:
codesanbox复现链接

预期行为

要能正常显示.

实际行为

页面不能正常显示.
控制台有报错:

chunk-LPQSS7GT.js?v=243ff024:2408 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at Dy (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:28862:15)
at y (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:28910:15)
at https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:29348:15
at XS (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:32761:19)
at pE (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:32860:16)
at Tw (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-UTWAXTZW.js?v=243ff024:15127:18)
at div
at div
at Fw (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-UTWAXTZW.js?v=243ff024:15969:44)
at section
at s (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-UTWAXTZW.js?v=243ff024:16204:13)
at ComponentWithInjector
at me (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-QOIIHFWJ.js?v=243ff024:3446:23)
at footer
at section
at div
at yI (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:25762:21)
at I5 (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-QOIIHFWJ.js?v=243ff024:4023:13)
at ComponentWithInjector

运行环境

Chrome

系统信息

workspace git:(csb-3c9y4d/draft/wonderful-proskuriakova) ✗ npx envinfo --system --binaries --browsers
Need to install the following packages:
envinfo@7.13.0
Ok to proceed? (y) y

System:
OS: Linux 6.1 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (2) x64 AMD EPYC
Memory: 773.01 MB / 4.01 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 20.12.1 - /home/codespace/nvm/current/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 10.5.0 - /home/codespace/nvm/current/bin/npm
pnpm: 9.1.4 - /home/codespace/nvm/current/bin/pnpm

univer-bot · Answer 1 · Wed Jun 05 2024 14:11:50 GMT+0800 (China Standard Time)

Bot detected the issue body's language is not English, translate it automatically. 👯👭🏻🧑‍🤝‍🧑👫🧑🏿‍🤝‍🧑🏻👩🏾‍🤝‍👨🏿👬🏿

Origin Title: [Bug] 0.1.13在vben-admin下无法正常工作

Title: [Bug] 0.1.13 not working properly under vben-admin

Before you submitted this question, did you check the following?

Is this really a problem?
I've searched Github Issues but haven't found any similar issues.

Affected packages and versions

0.1.13

Recurrence link

You can see the access path: https://3c9y4d-5173.csb.app/#/comp/table/UniverSheet

Recurring link address:
[codesanbox recurrence link](https://codesandbox.io/p/github/vbenjs/vue-vben-admin/main?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522% 253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2 522id%2522%253A%2522ROOT_LAYOUT%2522% 252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%2 53A%2522vertical%2522%252C%2522id% 2522%253A%2522clx1dipkt0005356klqpn6ubu%2522%252C%2522sizes%2522%253A%255B76.74285713857144%252C23.257142861428562%255D%252C%25 22panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C% 2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A %255B%257B%2522type%2522% 253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clx1dipkt0002356k3ao1gn0o%2522%257D%255D%257D%2 52C%257B%2522type%2522%253A%2522PANEL_GROUP%2522% 252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522 %253A%255B%257B%2522type% 2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clx1dipkt0003356kl8blmfrj%2522%257D%255D%2 52C%2522sizes%2522%253A%255B100%255D%257D% 255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522 %252C%2522id%2522%253A% 2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id% 2522%253A%2522clx1dipkt0004356k4q16dr2l%2522% 257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B84.3819838404676%252C15.618016159532402% 255D%257D%252C%2522tabbedPanels%2522%253A%257B% 2522clx1dipkt0002356k3ao1gn0o%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clx1dipks0001356kqjfamael%2522%252C%252 2mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE% 2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522clx1dipkt0002356k3ao1gn0o%2522%252C%2522activeTab Id%2522%253A%2522clx1dipks0001356kqjfamael%2522%257D%252C% 2522clx1dipkt0004356k4q16dr2l%2522%253A%257B%2522id%2522%253A%2522clx1dipkt0004356k4q16dr2l%2522%252C%2522activeTabId%2522%253A%2522clx 1dvvhm00l6356ksbyg1prn%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT% 2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clx1dvvhm00l6356ksbyg1prn%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%25 22path%2522%253A%2522%252F%2523%252Fdashboard% 252Fanalysis%2522%257D%255D%257D%252C%2522clx1dipkt0003356kl8blmfrj%2522%253A%257B%2522id%2522%253A%2522clx1dipkt0003356kl8blmfrj%2522%25 2C%2522activeTabId%2522%253A%2522clx1dq9lj00f7356k2sahw3je%2522%252C%2522tabs%2522%253A% 255B%257B%2522id%2522%253A%2522clx1dq9lj00f7356k2sahw3je%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL% 2522%252C%2522shellId%2522%253A%2522clx1dqanl012wddfxau5uc3zw%2522% 257D%252C%257B%2522id%2522%253A%2522clx1exqwh00rd356kpjtgwmyq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522 TERMINAL%2522%252C%2522shellId%2522%253A%2522clx1exryz0140ddfx3qyc4zyq% 2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522% 253A24.21875%257D)

Expected behavior

It must be displayed normally.

Actual behavior

The page cannot be displayed normally.
There is an error in the console:

chunk-LPQSS7GT.js?v=243ff024:2408 Warning: findDOMNode is deprecated and will be removed in the next major release. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https: //reactjs.org/link/strict-mode-find-node
at Dy (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:28862:15)
at y (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:28910:15)
at https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:29348:15
at XS (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:32761:19)
at pE (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:32860:16)
at Tw (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-UTWAXTZW.js?v=243ff024:15127:18)
at div
at div
at Fw (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-UTWAXTZW.js?v=243ff024:15969:44)
at section
at s (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-UTWAXTZW.js?v=243ff024:16204:13)
at ComponentWithInjector
at me (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-QOIIHFWJ.js?v=243ff024:3446:23)
at footer
at section
at div
at yI (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-LPQSS7GT.js?v=243ff024:25762:21)
at I5 (https://3c9y4d-5173.csb.app/node_modules/.vite/deps/chunk-QOIIHFWJ.js?v=243ff024:4023:13)
at ComponentWithInjector

Running environment

Chrome

system message

workspace git:(csb-3c9y4d/draft/wonderful-proskuriakova) ✗ npx envinfo --system --binaries --browsers
Need to install the following packages:
envinfo@7.13.0
Ok to proceed? (y) y

System:
OS: Linux 6.1 Ubuntu 20.04.6 LTS (Focal Fossa)
CPU: (2) x64 AMD EPYC
Memory: 773.01 MB / 4.01 GB
Container: Yes
Shell: 5.0.17 - /bin/bash
Binaries:
Node: 20.12.1 - /home/codespace/nvm/current/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 10.5.0 - /home/codespace/nvm/current/bin/npm
pnpm: 9.1.4 - /home/codespace/nvm/current/bin/pnpm

白熱 · Answer 2 · Wed Jun 05 2024 16:50:06 GMT+0800 (China Standard Time)

Please check if you have forgotten to import the necessary style files. Additionally, the link you provided does not contain any code related to Univer or the reproducible problem you are experiencing.

The warning about findDOMNode will be resolved in version 0.1.14. It does not impact the functionality or usability of the library.

hawk · Answer 3 · Wed Jun 05 2024 23:55:56 GMT+0800 (China Standard Time)

Please check if you have forgotten to import the necessary style files. Additionally, the link you provided does not contain any code related to Univer or the reproducible problem you are experiencing.

The warning about findDOMNode will be resolved in version 0.1.14. It does not impact the functionality or usability of the library.

You can view the component file here: \project\vue-vben-admin\src\components\Excel\UniverSheet.vue
The path of the view file: \project\vue-vben-admin\src\views\demo\table\UniverSheet.vue
In fact, I built this based on the following: https://univer.ai/playground?title=Vue+3

Since we discussed in the WeChat group that these two plugins are not necessary, I did not install them.

import { univerPlugin } from "@univerjs/vite-plugin";
import vue from '@vitejs/plugin-vue'

In fact, it has been unstable since version 0.1.13. I noticed that there is no CSS import in this example: https://univer.ai/playground?title=Vue+3 However, you said it is related to the lack of CSS import. Therefore, I imported the CSS files in this file:

import "@univerjs/design/lib/index.css";
import "@univerjs/ui/lib/index.css";
import "@univerjs/docs-ui/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";

Even though I did this, the display result is still incorrect. You can refer to this link:
https://3c9y4d-5173.csb.app/#/comp/table/UniverSheet