React-grid-layout: ResponsiveReactGridLayout mutates props

[darekkay]

After updating to 0.17.1, my jest test is failing:

  const wrapper = mountConnected(<App />);
  ReactDOM.render(wrapper, div);
  ReactDOM.unmountComponentAtNode(div);

The error I get:

Cannot assign to read only property 'mobile' of object '#<Object>'

It is thrown here: https://github.com/STRML/react-grid-layout/blob/master/lib/ResponsiveReactGridLayout.jsx#L260

In addition, the application crashes, when changing the breakpoints.

The reason is that layouts is mutated, as it comes from nextProps. Instead, a new object should be created.
~As this particular code is not new, it might come from this change.~

Mutating props usually doesn't break things (even though it is discouraged), but in my case, immer makes the props explicitly readonly, which in the end breaks.

The issue is reproducable in my repository, after replacing xit with it.

I am happy to open a new PR if someone confirms my assumptions and the suggested solution.

P.S.: Thanks a lot for the latest updates!

[darekkay]

This does not only let my test fail, but it also crashes the application when changing a breakpoint. I have provided and verified a fix in #1064 .

[darekkay]

After a lot of debugging, I have finally found the core issue. It was not introduced with the latest react-grid-layout update, but with an update to redux-starter-kit. The change was introduced in v0.9.0, most likely with the immer update. With this update, immer rightly assumes that the state/props are immutable. Hence, my fix is still relevant/required.

[misha-panyushkin]

@darekkay @STRML any update on this?

I faced the relevant issue (as I supposed):

Uncaught TypeError: Cannot assign to read only property 'w' of object '#<Object>'

Every time I add only one single item on the dashboard and trying to resize it crashes at this line:

at ReactGridLayout.onResize (ReactGridLayout.js:581)

[yzvz]

I have the same issue @misha-panyushkin stated above:

Uncaught TypeError: Cannot assign to read only property 'w' of object '#<Object>'

at ReactGridLayout.onResize (ReactGridLayout.js:455)

if (!hasCollisions) {
  // Set new width and height.
  l.w = w;
  l.h = h;
} // Create placeholder element (display only)

When I do resize a grid item. I suppose this issue got appeared with the latest update.

[misha-panyushkin]

@yzvz yeap, same thing. My workaround was to update the whole component on changing states between 0 grid items to 1 grid item as follows (my case the are no error while using more than 1 grid item):

<ResponsiveGridLayout
          key={`${!!layouts.lg.length}`}
          {...restProps}
>
</ResponsiveGridLayout>

[misha-panyushkin]

@STRML thank you for a speedy reply! When to wait for a new release?

[Anwardo]

@STRML @daynin a new release with this fix would be much appreciated.

[darekkay]

@misha-panyushkin @yzvz My PR fixed the issue on breakpoint change, but I am now also facing the issue you've mentioned on widget resize. It's a different place that requires a similar fix. I will look into it and provide another PR.

I've created a separate issue: #1155