[Bug] Spreadsheet become blank with corrupted data in a cell

[Blaked84]

Before you submit this issue, have you checked the following

• Is this really a problem?
• I have searched the Github Issues for similar issues, but did not find anything.

Affected packages and versions

sheets 0.5.1

Reproduction link

I found this issue when a cell data is :

{
    "p": {
        "id": "__INTERNAL_EDITOR__DOCS_NORMAL",
        "body": {
            "textRuns": [
                {
                    "ed": 1,
                    "st": 0,
                    "ts": {
                        "ff": "Open Sans",
                        "fs": 10,
                        "ol": {
                            "s": 0
                        },
                        "st": {
                            "s": 0
                        },
                        "ul": {
                            "s": 0
                        }
                    }
                }
            ],
            "dataStream": "\rV",
            "paragraphs": [
                {
                    "startIndex": 0,
                    "paragraphStyle": {
                        "horizontalAlign": 0
                    }
                }
            ],
            "customBlocks": [],
            "customRanges": [],
            "customDecorations": []
        },
        "drawings": {},
        "settings": {
            "zoomRatio": 1
        },
        "documentStyle": {
            "pageSize": {
                "width": null,
                "height": null
            },
            "marginTop": 0,
            "marginLeft": 2,
            "marginRight": 2,
            "marginBottom": 1,
            "renderConfig": {
                "centerAngle": 0,
                "vertexAngle": 0,
                "wrapStrategy": 0,
                "verticalAlign": 3,
                "horizontalAlign": 0,
                "zeroWidthParagraphBreak": 1
            }
        },
        "drawingsOrder": []
    },
    "s": "HQOGk0"
}

I don't know how the cell data was created, as I was from a user input on a large spreadsheet.
The initial spreadsheet data was created with the "appVersion":"0.2.14" but the issue appeared after several spreadsheet edits on 0.5.1.

I don't know if the cell data is corrupted or if this is an expected behavior.

Maybe related to #3835

I recreated the error here:

https://stackblitz.com/~/github.com/Blaked84/sheets-vite-demo?file=main.ts

Expected behavior

No error, and a empty cell should be displayed.

Actual behavior

Speadsheet become blank and an error is returned.

chunk-KR23DKHP.js?v=80be101e:25178 Uncaught TypeError: Cannot destructure property 'width' of 'n' as it is undefined.
    at te (chunk-KR23DKHP.js?v=80be101e:25178:57)
    at Y5._calculateOverflowCell (chunk-KR23DKHP.js?v=80be101e:26021:15)
    at Y5._setFontStylesCache (chunk-KR23DKHP.js?v=80be101e:26239:60)
    at Y5._setStylesCacheForOneCell (chunk-KR23DKHP.js?v=80be101e:26263:86)
    at Y5.setStylesCache (chunk-KR23DKHP.js?v=80be101e:25384:16)
    at QS.render (chunk-KR23DKHP.js?v=80be101e:29289:7)
    at sT.render (chunk-KR23DKHP.js?v=80be101e:33437:12)
    at xx._draw (chunk-KR23DKHP.js?v=80be101e:30659:9)
    at xx.render (chunk-KR23DKHP.js?v=80be101e:30633:87)
    at Ox.render (chunk-KR23DKHP.js?v=80be101e:32423:12)

System information

  System:
    OS: macOS 14.2.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 60.94 MB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.0 - ~/.asdf/installs/nodejs/18.12.0/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.4.0 - ~/Library/pnpm/pnpm
    Watchman: 2023.12.04.00 - /opt/homebrew/bin/watchman
  Browsers:
    Brave Browser: 131.1.73.89
    Safari: 17.2.1

[lumixraku]

datastream should end with \r\n, and you miss "section break" part.
then update index of paragraphs and section breaks.

A valid data is like this

{
    "id": "__INTERNAL_EDITOR__DOCS_NORMAL",
    "body": {
        "textRuns": [
            {
                "ed": 1,
                "st": 0,
                "ts": {
                    "ff": "Open Sans",
                    "fs": 10,
                    "ol": {
                        "s": 0
                    },
                    "st": {
                        "s": 0
                    },
                    "ul": {
                        "s": 0
                    }
                }
            }
        ],
        "dataStream": "V\r\n",
        "paragraphs": [
            {
                "startIndex": 1,
                "paragraphStyle": {
                    "horizontalAlign": 0
                }
            }
        ],
        "sectionBreaks": [
            {
                "startIndex": 2
            }
        ],
        "customBlocks": [],
        "customRanges": [],
        "customDecorations": []
    },
    "drawings": {},
    "settings": {
        "zoomRatio": 1
    },
    "documentStyle": {
        "pageSize": {
            "width": null,
            "height": null
        },
        "marginTop": 0,
        "marginLeft": 2,
        "marginRight": 2,
        "marginBottom": 1,
        "renderConfig": {
            "centerAngle": 0,
            "vertexAngle": 0,
            "wrapStrategy": 0,
            "verticalAlign": 3,
            "horizontalAlign": 0,
            "zeroWidthParagraphBreak": 1
        }
    },
    "drawingsOrder": []
}

[Blaked84]

datastream should end with \r\n, and you miss "section break" part. then update index of paragraphs and section breaks.

@lumixraku This "dataStream": "\rV" seems to be created by a user when working on a spreadsheet.
Do you need more information on how this cell content was created? I can investigate further, but I haven't yet found a way to reproduce it.

[lumixraku]

@Jocs Do you have any tips?

[nahooni0511]

In React’s development mode—especially under Strict Mode—components can go through a “mount → unmount → mount” cycle. This double invocation is intentional and helps detect unintended side effects or memory leaks in components.

However, in the case of UniverSheet, its dispose method has a slight delay. During the first unmount, dispose is triggered, and then on the subsequent mount, the sheet is re-created. Because dispose isn’t fully completed before the new creation starts, a bug occurs.

To confirm this behavior, you can add a small delay (e.g., using setTimeout) before calling the create logic in the useEffect hook. Doing so ensures the dispose process finishes before the new sheet is created, thereby preventing the bug. You can also add a listener for the DocDisposed event, like so:

univerAPI.addEvent('DocDisposed', (params) => {
    console.log('DocDisposed', params);
});

Observing the console logs in conjunction with this event will make the execution order clearer and confirm that the dispose completes before the next mount begins.