reactdatagrid icon indicating copy to clipboard operation
reactdatagrid copied to clipboard

ReactDataGrid crashes when using new React 18 createRoot API

Open CloudNiner opened this issue 3 years ago • 5 comments

  • what edition are you using - enterprise
  • version for @inovua/reactdatagrid-enterprise - 4.16.10

What you did:

I updated my app to use the new React 18 initialization API see: https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis

What happened:

When I attempt to initialize a ReactDataGrid in an React app using this new API, ReactDataGrid crashes with the error:

Uncaught TypeError: _this.rows is null
    node_modules bundle.js:58397
    node_modules bundle.js:58410
    UNSAFE_componentWillReceiveProps index.js:1548
    React 13
        callComponentWillReceiveProps
        updateClassInstance
        updateClassComponent
        beginWork
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        beginWork$1
        performUnitOfWork
        workLoopSync
        renderRootSync
        recoverFromConcurrentError
        performConcurrentWorkOnRoot
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
[index.js:855](http://localhost:3000/Users/andrew.fink-miller/src/react18-rdg/node_modules/@inovua/reactdatagrid-community/packages/react-virtual-list-pro/src/index.js)
The above error occurred in the <InovuaVirtualList> component:

InovuaVirtualList@http://localhost:3000/static/js/bundle.js:57679:34
InovuaDataGridList@http://localhost:3000/static/js/bundle.js:5385:34
FakeFlex@http://localhost:3000/static/js/bundle.js:1386:34
div
InovuaDataGridEnterpriseColumnLayout@http://localhost:3000/static/js/bundle.js:67741:34
FakeFlex@http://localhost:3000/static/js/bundle.js:1386:34
div
InovuaDataGridLayout@http://localhost:3000/static/js/bundle.js:14733:34
div
./node_modules/@inovua/reactdatagrid-community/factory.js/GridFactory/Grid<@http://localhost:3000/static/js/bundle.js:17537:41
TheGrid@http://localhost:3000/static/js/bundle.js:18978:43
div
App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Reproduction repository:

https://github.com/CloudNiner/react18-rdg-crash-example

Problem description:

React 18 provides a new API for app initialization which when used with ReactDataGrid appears to cause crashes during its rendering loop.

Suggested solution:

I would expect to be able to use ReactDataGrid with the new React 18 client rendering API.

CloudNiner avatar Apr 08 '22 15:04 CloudNiner

I am having the same issue.

pierrettemugisha avatar Apr 25 '22 13:04 pierrettemugisha

@CloudNiner @pierrettemugisha we'll ad React 18 support soon. Please stay tuned.

inovua-admin avatar May 13 '22 08:05 inovua-admin

If you remove <StrictMode/> it should work.

rafaelfrancisco-dev avatar Jun 21 '22 15:06 rafaelfrancisco-dev

any update on this? I am observing weird error in strict mode react 18 @inovua-admin Screenshot 2022-06-27 at 10 40 40 AM

vishal-kadmos avatar Jun 27 '22 08:06 vishal-kadmos

@vishal-kadmos we are currently working on a fix as a priority

inovua-admin avatar Jun 27 '22 12:06 inovua-admin

@inovua-admin any update on fix for react 18?

vishal-kadmos avatar Aug 29 '22 07:08 vishal-kadmos

Any update on this @inovua-admin ?

ghost avatar Sep 15 '22 03:09 ghost

@dave-multiplier we are really close to a stable release

inovua-admin avatar Sep 15 '22 03:09 inovua-admin

Fixed in version 5.0.0.

inovua-admin avatar Sep 30 '22 09:09 inovua-admin

🎉 awesome news. Thanks so much!

CloudNiner avatar Sep 30 '22 14:09 CloudNiner