Import slickgrid-react to React javascript project

[PanagramYS]

Hi, I am using SlickGrid React with JavaScript.

I keep receiving this error:

Uncaught runtime errors:
ERROR
Cannot read properties of null (reading 'id')
TypeError: Cannot read properties of null (reading 'id')
at http://localhost:3000/static/js/bundle.js:89028:46
at Array.some ()
at SlickgridReact.swapInternalEditorToSlickGridFactoryEditor (http://localhost:3000/static/js/bundle.js:89028:27)
at SlickgridReact.initialization (http://localhost:3000/static/js/bundle.js:88054:36)
at SlickgridReact.componentDidMount (http://localhost:3000/static/js/bundle.js:87994:10)
at invokeLayoutEffectMountInDEV (http://localhost:3000/static/js/bundle.js:76888:26)
at invokeEffectsInDev (http://localhost:3000/static/js/bundle.js:78806:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3000/static/js/bundle.js:78787:9)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:78562:9)
at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:78500:18)
ERROR
Cannot set properties of null (setting 'Sortable1692657172012')
TypeError: Cannot set properties of null (setting 'Sortable1692657172012')
at Sortable.destroy (http://localhost:3000/static/js/bundle.js:100914:17)
at SlickGrid.destroy (http://localhost:3000/static/js/bundle.js:94676:34)
at SlickgridReact.componentWillUnmount (http://localhost:3000/static/js/bundle.js:88221:17)
at callComponentWillUnmountWithTimer (http://localhost:3000/static/js/bundle.js:74968:20)
at safelyCallComponentWillUnmount (http://localhost:3000/static/js/bundle.js:74987:9)
at commitDeletionEffectsOnFiber (http://localhost:3000/static/js/bundle.js:76049:17)
at recursivelyTraverseDeletionEffects (http://localhost:3000/static/js/bundle.js:75929:9)
at commitDeletionEffectsOnFiber (http://localhost:3000/static/js/bundle.js:75956:15)
at recursivelyTraverseDeletionEffects (http://localhost:3000/static/js/bundle.js:75929:9)
at commitDeletionEffectsOnFiber (http://localhost:3000/static/js/bundle.js:75956:15)
ERROR
Cannot read properties of null (reading 'id')
TypeError: Cannot read properties of null (reading 'id')
at http://localhost:3000/static/js/bundle.js:89028:46
at Array.some ()
at SlickgridReact.swapInternalEditorToSlickGridFactoryEditor (http://localhost:3000/static/js/bundle.js:89028:27)
at SlickgridReact.initialization (http://localhost:3000/static/js/bundle.js:88054:36)
at SlickgridReact.componentDidMount (http://localhost:3000/static/js/bundle.js:87994:10)
at invokeLayoutEffectMountInDEV (http://localhost:3000/static/js/bundle.js:76888:26)
at invokeEffectsInDev (http://localhost:3000/static/js/bundle.js:78806:15)
at commitDoubleInvokeEffectsInDEV (http://localhost:3000/static/js/bundle.js:78787:9)
at flushPassiveEffectsImpl (http://localhost:3000/static/js/bundle.js:78562:9)
at flushPassiveEffects (http://localhost:3000/static/js/bundle.js:78500:18)
ERROR
Cannot set properties of null (setting 'Sortable1692657172012')
TypeError: Cannot set properties of null (setting 'Sortable1692657172012')
at Sortable.destroy (http://localhost:3000/static/js/bundle.js:100914:17)
at SlickGrid.destroy (http://localhost:3000/static/js/bundle.js:94676:34)
at SlickgridReact.componentWillUnmount (http://localhost:3000/static/js/bundle.js:88221:17)
at callComponentWillUnmountWithTimer (http://localhost:3000/static/js/bundle.js:74968:20)
at safelyCallComponentWillUnmount (http://localhost:3000/static/js/bundle.js:74987:9)
at commitDeletionEffectsOnFiber (http://localhost:3000/static/js/bundle.js:76049:17)
at recursivelyTraverseDeletionEffects (http://localhost:3000/static/js/bundle.js:75929:9)
at commitDeletionEffectsOnFiber (http://localhost:3000/static/js/bundle.js:75956:15)
at recursivelyTraverseDeletionEffects (http://localhost:3000/static/js/bundle.js:75929:9)
at commitDeletionEffectsOnFiber (http://localhost:3000/static/js/bundle.js:75956:15)

For the error: Cannot set properties of null (setting 'Sortable1692657172012'), it's from sortable.esm.js:
destroy: function destroy() {
pluginEvent('destroy', this);
var el = this.el;
el[expando] = null; //line causes the error
off(el, 'mousedown', this._onTapStart);
off(el, 'touchstart', this._onTapStart);
off(el, 'pointerdown', this._onTapStart);

if (this.nativeDraggable) {
  off(el, 'dragover', this);
  off(el, 'dragenter', this);
} // Remove draggable attributes

I defined the columns like this:

columnsDef: Column[] = [
{id: 'Id', name: 'ID', field: 'Id', filterable: true, sortable: true, minWidth: 70},
{id: 'Date', name: 'Date', field: 'factorDate', filterable: true, sortable: true, minWidth: 70, formatter: Formatters.dateIso},
{id: 'factor', name: 'Factor', field: 'factor', filterable: true, sortable: true, minWidth: 70},
]

Could you please help?

[meloblerd]

I ran into this same error. Although it didn't matter if I was in TypeScript or JavaScript project. I was stumped for days. What I had to do was disable React.StrictMode. I assume it is related to React 18 running side effects twice in development. One of those times it was passing in null for my columnDefinitions of my SlickGrid.

Any thoughts on that @ghiscoding ? I'm just glad I found a workaround.

[ghiscoding]

I'm not a React developer at all, so I'm afraid there isn't much help I can bring to this, I never fully understood the useEffect stuff either

[baj1210]

@meloblerd

What I had to do was disable React.StrictMode.

This solved my problem.. I'd never have figured that out.