[XGrid] Column resizing broken in StrictMode

[Ackermannen]

I opened up a new react project to test x-grid and it works for the most part, but resizing doesn't seem to work at the moment.

I've set up my project like this:

import React from 'react';

import { XGrid, RowsProp, ColDef, LicenseInfo } from '@material-ui/x-grid';

LicenseInfo.setLicenseKey(test);

const rows: RowsProp = [
  { id: 1, col1: 'Hello', col2: 'World' },
  { id: 2, col1: 'XGrid', col2: 'Awesome' },
  { id: 3, col1: 'Material-UI', col2: 'Amazing' },
];

const columns: ColDef[] = [
  { field: 'id', hide: true},
  { field: 'col1', headerName: 'Column 1', resizable: true },
  { field: 'col2', headerName: 'Column 2', resizable: true },
];

function App() {
  return (
    <div className='App' style={{ height: 400, width: '100%', display: 'flex', flexGrow: 1 }}>
      <XGrid columns={columns} rows={rows} />
    </div>
  );
}

export default App;

The drag button does seem to work but nothing happens. I also get this error inside the console when i try to drag the columns:

index-esm.js:15 Uncaught TypeError: Cannot read property 'field' of undefined
    at fr (index-esm.js:15)
    at index-esm.js:264
    at HTMLDivElement.<anonymous> (index-esm.js:264)

[Ackermannen]

Issue was due to using StrictMode in project

[oliviertassinari]

@Ackermannen Thanks for the report. I could put a reproduction on https://codesandbox.io/s/modest-herschel-4vkmo?file=/src/index.js. This is important, I'm reopening.

[oliviertassinari]

A note, if we were developing the components with StrictMode enabled, we would have avoided this issue. However, I believe that to enable StrictMode on the documentation and the storybook, some other problems will need to be solve first. So, one step at the time.