Uncaught ** Assertion failed in Wijmo: Element is already hosting a control

Posted by: abhijeet.jaiswal on 14 September 2022, 9:26 pm EST

    • Post Options:
    • Link

    Posted 14 September 2022, 9:26 pm EST

    I’m using flexsheet in our project. Everything was fine until we thought of upgrading react version from 17.0.2 to 18.2.0.

    I’ve started getting error saying - Uncaught ** Assertion failed in Wijmo: Element is already hosting a control.

    Grid/flexsheet is not even being rendered. error gets thrown from initializeFlexSheet function.

    flex.deferUpdate(() => {
          const grid = new wjGrid.FlexGrid(document.createElement('div'), {
            itemsSource: data,
            columns: getColumns(),
          });
          flex.addBoundSheet('PriceAssessment', data, 0, grid);
          data.trackChanges = true;
          flex._contextMenu.show = () => false;
        });
    
    

    Versions of packages that I’m using are

    
        "@grapecity/wijmo.grid": "^5.20221.857",
        "@grapecity/wijmo.grid.xlsx": "^5.20221.857",
        "@grapecity/wijmo.react.grid.sheet": "^5.20221.857",
    
    import { FlexSheet } from '@grapecity/wijmo.react.grid.sheet';
    
    export const StyledFlexsheet = styled<any>(FlexSheet)`
      .wj-cell {
        font-size: 12px;
      }
    `;
    
    <StyledFlexsheet
                id="sample-sheet"
                stickyHeaders={true}
                isReadOnly={isReadOnly}
                ref={this.theGrid}
                autoGenerateColumns={false}
                keyActionTab="Cycle"
                isTabHolderVisible={false}
                itemsSource={data}
                selectionChanged={this.flexSelectionChanged}
                itemFormatter={this.formatItem}
                headersVisibility={wjGrid.HeadersVisibility.None}
                allowDragging={wjGrid.AllowDragging.None}
                allowResizing={wjGrid.AllowResizing.None}
                selectionMode={wjGrid.SelectionMode.CellRange}
                initialized={this.initializeFlexSheet}
                loadedRows={this.loadedRows}
                rowEditEnded={this.handleUpdateDataSet}
                cellEditEnded={this.handleCellEditEnded}
                beginningEdit={this.handleBeginningEdit}
              />
    ```[img]https://gccontent.blob.core.windows.net/forum-uploads/file-cf0f9ea4-24c6-4631-8cf8-cae8fc7165e4.png[/img]
  • Posted 15 September 2022, 10:41 pm EST

    Hello,

    The issue is caused due to React.StrictMode which force components to be rendered twice. This is a known incompatibility with react18:

    • "StrictMode is not supported. React18 StrictMode force double rendering of a component in the same tick in the contract to previous react versions. It means that the wijmo-component is called to be mounted, unmounted, and mounted again in the same tick. But the wijmo-component postpones unmounting for the next tick. So second mounting takes place on mounted components which leads to error. "

    • “ReactDOM methods are no longer supported. Some wijmo components (FlexGridCelltemplate, MenuItemTemplate, etc) use these methods.”

    To disable strict mode

    
    <React.StrictMode>
      <App />
    </React.StrictMode>
    

    should be replaced by

    <App />
    

    Please let us know if the issue still persists at your end.

    Regards

  • Posted 18 September 2022, 11:54 pm EST

    Hi,

    Thaks for your quick response.

    FYI, i am using Next.js.

    So i had to disable it using the following line in the next.config.ts file

    
    	module.exports = withTM({
             	swcMinify: true,
      		reactStrictMode: false,
    	})
    
    
  • Posted 19 September 2022, 2:26 pm EST

    Hello,

    We are glad to know that you were able to resolve the issue. Thank you for sharing the information with us.

    Regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels