TypeError: Cannot read properties of null (reading 'view')

Tags: #<Tag:0x00007efc6d2c8ab0> #<Tag:0x00007efc6d2c88a8>
#1

Hi there! I’m trying to create excel-like app in react (next.js) that handles thousands rows of data (in Sheet0) and calculate some formulas in another spreadsheet (Sheet1).
I’m also using Mantine (UI library) to render these spreadsheets in different tabs. Because of the performance issues I need to render both spreadsheets at the same time (one with display: none;) so the user can switch between tabs without any lag.
Issue: when changing to the tab with calculations (Sheet1) I get an error: Uncaught TypeError: Cannot read properties of null (reading ‘view’) (see the screenshot below)

image
image.png1174×338 77.4 KB

another issue (I believe it is related to the first one): if you update a cell in Sheet0 and then switch to Sheet1 (with calculations) the calculated values aren’t updated, only when you switch back to Sheet0 and then to Sheet1 (second time) the values are updated; Is there a way to manually trigger handsontable render with hyperformula instance?

Example in codesandbox

#2

Hi @alojzy231

Thank you for contacting us. I’m not familiar with the Mantine library, but looking at the error it looks like the second instance of Handsontable is invoked in some part of your code before it’s initialized. I can suggest to to try adding some timeout to the logic responsible for switching the tabs to be sure that the second instance exists before it’s displayed.

Regarding the issue with HyperFormula. We’ve had similar case, so this solution might also work here: https://jsfiddle.net/Lkdy67z4/2/

You have to make sure that the HyperFormula instance is created before the data is declared, and also register the sheet to the engine:

hyperformulaInstance.addSheet('Sheet1')
#3

Thanks for the quick reply!

  1. I’ve resolved that issue by using useState() to control the Tabs component, but switching between tabs has started lagging (and my main objective is to keep the speed of the transition as fast as in the example in the description) but calculation are done at the first switch. I’ll start my research by inspecting Mantine library (The same lag exists when I’m using native HTML + CSS solution - codesandbox example so maybe Mantine somehow optimizes the tab switching). Have you got any tips to optimize tabs switching (based on native HTML+CSS example)?
  2. TypeError: Cannot read properties of null (reading 'view') - the fix for this issue (at least in my case) is to change how the tab’s content is hidden: the error is thrown when i use display: none; to hide my content, and the error is not present when I’ve combined: visibility: hidden; + height: 0; (codesandbox with display: none; and example with visibility: hidden;). Is it supposed to crash when I use display: none;?
#4

Hi @alojzy231

I’m glad that you were able to find the solution!

  1. As Handsontable doesn’t support tabbing out of the box it’s very dependent on the tool you choose to implement it. I can suggest to try using the performance tips we provide in this guide: https://handsontable.com/docs/javascript-data-grid/performance/

  2. We’ve had issues with display: none property, but it was fixed. I’ll have to perform more tests on this, but while I was checking the initial issue it seems to work correctly.

1 Like
#5

Hello there,

  1. I’ve resolved the issue with performance by wrapping the HotTable in memo() -> each time when ANY state has changed (even if it is not used by HotTable) the component got rerendered and that caused the lag.
  2. The issue with display: none property still exists: in order for calculations to work with “hidden” sheet (Mantine hides a tab by setting style="display: none") I needed to enforce Mantine to hide the component by the combination of visibility: hidden and height:0.

Is the rerendering of HotTable each time when any state changes intended? I’ve prepared examples where I use HotTable and some button that increments the state by one:

  1. not memoized - you can experience a lag when clicking a button and after some delay the displayed value is updated
  2. memoized component - no lag and value is updated instantly

For anyone interested how I solved an issue with display: none in Mantine and memoization of HotTable here is the example

1 Like
#6

Hi @alojzy231

Thank you for your input! I’m sure it will be helpful for other users with similar issues.

#7