Univer Sheet - UI Not Viewable

[tannerTurba]

Hello,

I have updated the Univer packages in my project from v0.1.17 to v0.2.15, however the Univer Sheet is no longer viewable on my webpage. Upon loading, the spreadsheet appears for a split second before vanishing again. I realize there have been several updates in the time between v0.1.17 and v0.2.15, but is there anything that I could have missed that might cause this problem?

I appreciate any and all guidance I can receive to resolve this problem! Thank you!

package.json

"dependencies": {
    "@univerjs/core": "^0.2.15",
    "@univerjs/design": "^0.2.15",
    "@univerjs/docs": "^0.2.15",
    "@univerjs/docs-ui": "^0.2.15",
    "@univerjs/engine-formula": "^0.2.15",
    "@univerjs/engine-render": "^0.2.15",
    "@univerjs/facade": "^0.2.15",
    "@univerjs/find-replace": "^0.2.15",
    "@univerjs/network": "^0.2.15",
    "@univerjs/sheets": "^0.2.15",
    "@univerjs/sheets-crosshair-highlight": "^0.2.15",
    "@univerjs/sheets-data-validation": "^0.2.15",
    "@univerjs/sheets-drawing-ui": "^0.2.15",
    "@univerjs/sheets-filter": "^0.2.15",
    "@univerjs/sheets-find-replace": "^0.2.15",
    "@univerjs/sheets-formula": "^0.2.15",
    "@univerjs/sheets-numfmt": "^0.2.15",
    "@univerjs/sheets-thread-comment": "^0.2.15",
    "@univerjs/sheets-thread-comment-base": "^0.2.15",
    "@univerjs/sheets-ui": "^0.2.15",
    "@univerjs/thread-comment": "^0.2.15",
    "@univerjs/thread-comment-ui": "^0.2.15",
    "@univerjs/ui": "^0.2.15",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "rxjs": "^7.8.1",
  }

UniverSheet/index.tsx

import "@univerjs/design/lib/index.css";
import "@univerjs/sheets-formula/lib/index.css";
import "@univerjs/sheets-ui/lib/index.css";
import "@univerjs/ui/lib/index.css";
import '@univerjs/thread-comment-ui/lib/index.css'

import {
  IWorkbookData,
  LocaleType,
  Univer,
  UniverInstanceType,
  Workbook,
} from "@univerjs/core";
import { defaultTheme } from "@univerjs/design";
import { UniverDocsPlugin } from "@univerjs/docs";
import { UniverDocsUIPlugin } from "@univerjs/docs-ui";
import { UniverFormulaEnginePlugin } from "@univerjs/engine-formula";
import { UniverRenderEnginePlugin } from "@univerjs/engine-render";
import { FUniver } from "@univerjs/facade";
import { UniverSheetsPlugin } from "@univerjs/sheets";
import { UniverSheetsFindReplacePlugin } from "@univerjs/sheets-find-replace";
import { UniverSheetsFormulaPlugin } from "@univerjs/sheets-formula";
import { UniverSheetsUIPlugin } from "@univerjs/sheets-ui";
import { UniverUIPlugin } from "@univerjs/ui";
import {
  MutableRefObject,
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
} from "react";
import { enUS, ruRU, zhCN } from "./locales";
import { SheetsCustomMenuPlugin } from "./plugin/plugin";
import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment'

export type WorkbookHandle = {
  getData: () => IWorkbookData;
  univerAPI: MutableRefObject<FUniver>;
};

const UniverSheet = forwardRef((data: any, ref) => {
  const univerRef = useRef<Univer | null>(null);
  const workbookRef = useRef<Workbook | null>();
  const containerRef = useRef(null);
  const fUniverRef = useRef<FUniver | null>(null);

  useImperativeHandle(ref, () => ({
    getData,
    univerAPI: fUniverRef,
  }));

  /**
   * Initialize univer instance and workbook instance
   * @param data {IWorkbookData} document see https://univer.work/api/core/interfaces/IWorkbookData.html
   */
  const init = (data: any = {}) => {
    if (!containerRef.current) {
      throw Error("container not initialized");
    }
    const univer = new Univer({
      theme: defaultTheme,
      locale: LocaleType.EN_US,
      locales: {
        [LocaleType.EN_US]: enUS,
        [LocaleType.ZH_CN]: zhCN,
        [LocaleType.RU_RU]: ruRU,
      },
    });
    univerRef.current = univer;

    // core plugins
    univer.registerPlugin(UniverRenderEnginePlugin);
    univer.registerPlugin(UniverFormulaEnginePlugin);
    univer.registerPlugin(UniverUIPlugin, {
      container: containerRef.current,
      header: true,
      toolbar: false,
      footer: true,
      contextMenu: true,
    });

    // doc plugins
    univer.registerPlugin(UniverDocsPlugin, {
      hasScroll: false,
    });
    univer.registerPlugin(UniverDocsUIPlugin);

    // sheet plugins
    univer.registerPlugin(UniverSheetsPlugin);
    univer.registerPlugin(UniverSheetsUIPlugin);
    univer.registerPlugin(UniverSheetsFormulaPlugin);

    // find and replace plugin
    univer.registerPlugin(UniverSheetsFindReplacePlugin);

    // custom menu plugins
    univer.registerPlugin(SheetsCustomMenuPlugin);

    // thread comments
    univer.registerPlugin(UniverSheetsThreadCommentPlugin);

    // create workbook instance
    workbookRef.current = univer.createUnit<IWorkbookData, Workbook>(
      UniverInstanceType.UNIVER_SHEET,
      data
    );

    // Facade API instance
    fUniverRef.current = FUniver.newAPI(univer);
  };

  /**
   * Destroy univer instance and workbook instance
   */
  const destroyUniver = () => {
    univerRef.current?.dispose();
    univerRef.current = null;
    workbookRef.current = null;
  };

  /**
   * Get workbook data
   */
  const getData = () => {
    if (!workbookRef.current) {
      throw new Error("Workbook is not initialized");
    }
    return workbookRef.current.save();
  };

  useEffect(() => {
    init(data["data"]);
    return () => {
      destroyUniver();
    };
  }, [data]);

  return <div ref={containerRef} style={{ height: "100%" }} />;
});

export default UniverSheet;

Usage on react page:
<UniverSheet ref={univerRef} />

[jikkai]

To help us understand the issue, could you please create a minimal reproducible example on a platform like CodeSandbox or StackBlitz? This will allow us to see the problem in action and provide more specific guidance.

[tannerTurba]

https://stackblitz.com/edit/vitejs-vite-jzzwyp?file=package.json

[aniruddha-k]

Hi @tannerTurba,

Even I face this issue and commenting univerRef.current?.dispose(); this line helped. Hope it helps you too.