Posted 29 December 2025, 3:49 am EST - Updated 29 December 2025, 3:49 am EST
Environment
- SpreadJS Version: 19.0.0
- React Version: 18.3.1
- Build Tool: Vite 7.3.0
- TypeScript: 5.9.3
- React StrictMode: Enabled
- OS: macOS (Darwin 25.1.0)
- Browser: Chrome (latest)
SpreadJS Packages Used
“@mescius/spread-sheets”: “19.0.0”,
“@mescius/spread-sheets-designer”: “19.0.0”,
“@mescius/spread-sheets-designer-react”: “19.0.0”,
“@mescius/spread-sheets-designer-resources-en”: “19.0.0”,
“@mescius/spread-sheets-io”: “19.0.0”,
“@mescius/spread-sheets-react”: “19.0.0”,
“@mescius/spread-sheets-charts”: “19.0.0”,
“@mescius/spread-sheets-pivot-addon”: “19.0.0”,
“@mescius/spread-sheets-shapes”: “19.0.0”,
“@mescius/spread-sheets-print”: “19.0.0”,
“@mescius/spread-sheets-pdf”: “19.0.0”,
“@mescius/spread-sheets-barcode”: “19.0.0”,
“@mescius/spread-sheets-languagepackages”: “19.0.0”
Problem Description
After upgrading from SpreadJS v18.2.5 to v19.0.0, the Designer React component throws errors during component destruction/refresh cycles. These errors occur when:
- The component unmounts (navigating away from the page)
- The component re-renders/refreshes
- React StrictMode causes rapid mount/unmount cycles
The errors appear to originate from async DOM layout processes within the SpreadJS Designer that don’t complete before React destroys the DOM elements.
Error Messages
Error 1:
TypeError: d2.docProps.L0 is not a function
at gc.spread.sheets.io.19.0.0.min.js:11:17648
at Xkt (gc.spread.sheets.19.0.0.min.js:11:1048259)
at e.destroy (gc.spread.sheets.19.0.0.min.js:11:6009424)
at t._unbindSheet (gc.spread.sheets.designer.19.0.0.min.js:11:1262)
at t._setSpread (gc.spread.sheets.designer.19.0.0.min.js:11:1218)
at t.destroy (gc.spread.sheets.designer.19.0.0.min.js:11:884)
…
Error 2:
TypeError: Cannot read properties of undefined (reading ‘qy’)
at gc.spread.sheets.19.0.0.min.js:11:1034093
at tT (gc.spread.sheets.19.0.0.min.js:11:169251)
at gc.spread.sheets.19.0.0.min.js:11:169324
at e.refreshAll (gc.spread.sheets.19.0.0.min.js:11:169291)
at e._t (gc.spread.sheets.19.0.0.min.js:11:1034093)
…
Minimal Code to Reproduce
// main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// SpreadJSViewer.tsx (simplified)
import React from "react";
import "@mescius/spread-sheets-designer-resources-en";
import * as GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-io";
import "@mescius/spread-sheets-designer";
import "@mescius/spread-sheets/styles/gc.spread.sheets.excel2013lightGray.css";
import "@mescius/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import { Designer } from "@mescius/spread-sheets-designer-react";
GC.Spread.Sheets.LicenseKey = "YOUR_KEY";
const SpreadJSViewer = () => {
const designerRef = React.useRef(null);
const initDesigner = React.useCallback((designer) => {
designerRef.current = designer;
const workbook = designer.getWorkbook();
// Basic setup
}, []);
return (
<div style={{ width: "100%", height: "100vh" }}>
<Designer
styleInfo={{ width: "100%", height: "100%" }}
designerInitialized={initDesigner}
/>
</div>
);
};
export default SpreadJSViewer;Steps to Reproduce
- Create a React 18 app with Vite
- Enable React.StrictMode in main.tsx
- Install SpreadJS v19.0.0 packages
- Add the Designer component as shown above
- Navigate to the page containing the Designer
- Either:
- Navigate away from the page (triggers unmount), OR
- Wait for any re-render cycle - Observe errors in the browser console
Expected Behavior
The Designer component should mount, unmount, and re-render without throwing errors, even when React StrictMode is enabled (which intentionally causes rapid mount/unmount cycles in development).
Actual Behavior
The Designer throws TypeError exceptions during destruction, indicating that internal async DOM layout processes are still running when React destroys the component. The errors reference undefined properties (L0, qy) suggesting internal state has been partially cleaned up.
Workaround Attempted
We found a related forum post (https://developer.mescius.com/forums/spreadjs/preadjs-designer-destroy-error) suggesting manual Designer lifecycle management instead of using the React wrapper. However, this would require significant refactoring.
Additional Notes
- This worked correctly with SpreadJS v18.2.5
- The issue is more pronounced with React StrictMode enabled, but may also affect production builds during rapid navigation
- The errors don’t always prevent functionality but indicate potential memory leaks or race conditions
Questions
- Is there a known workaround for v19.0.0 to prevent these destroy errors?
- Are there any breaking changes in v19.0.0 related to component lifecycle that require code changes?
- Is manual lifecycle management (as suggested in the forum post) the recommended approach for React applications?
