Error showing the table: React 15.4.2 + IE + SharePoint

Tags: #<Tag:0x00007f8b22055960>
#1

Hi there, how are you?

I’m having an issue when i try to setting up handsontable with React and SharePoint Framework over IE11 (Chrome works fine).

Component

import * as React from 'react';
import { IFinancialSummaryGridProp } from './IFinancialSummaryGridProp';
import { IFinancialSummaryGridState } from './IFinancialSummaryGridState';
import { HotTable } from '@handsontable/react';
import 'handsontable/dist/handsontable.full.css';

export default class FinancialSummaryGrid extends React.Component<IFinancialSummaryGridProp,IFinancialSummaryGridState>{`

constructor(props) {
    super(props); 
}

render() {
    var toRender = <div> <HotTable data={[['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],['2019', 10, 11, 12, 13],['2020', 20, 11, 14, 13],['2021', 30, 15, 12, 13]]} colHeaders={true} rowHeaders={true} width="600" height="300" /> </div>;
    return toRender;
}

}

Issue nº1:

When i open the page in IE 11 is throwing me the following error “Out of stack space”.

Solution:

I fix that error adding the following polyfills:

import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';

Issue Nº2

After adding the pollyfields, the component appears to be working but doesn’t show the grid and throws the following error " Line: 84649
File: webpack:///~/handsontable/es/plugins/autofill/autofill.js
Error: Unable to get property ‘top’ of undefined or null reference":

image.png1551×549 55.4 KB

I stuck without a track to try to solve this, Has anyone has a sample proyect with React(TS) that works on IE 11 ?. So i can take as Base to replicate in SharePoint. Becouse i tried to to the same on a 100% React proyect and i haven’t be able to make it work.

#2

Hey @de.castro.guillermo

I don’t see any other issues reported in Handsontable for the following line

It will be nearly impossible to help without the ability to reproduce the issue. Maybe you’ll be able to share some examples? Have you tried to open the same project (Handsontable instance) outside the SharePoint? Just building a standard .html file.

#3

Hey @aleksandra_budnik,

Tonight i will create the two proyects, React and React+Sharepoint, and I send you the link.

Thank you for the response

#4

Great. I’ll be waiting.

#5

hey @de.castro.guillermo any updates?

#6

As there’s no updates I’m closing this topic.

#7