Update to @material-ui/core v5

[numToStr]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Whenever I press the next button, I get this error TypeError: onPageChange is not a function

Steps to Reproduce 🕹

Steps:

1. Render a big list so that pagination button can be enabled
2. Press next button.

Context 🔦

I think there were some breaking change which were introduced in the @material-ui/core: v5-alpha.12 as this was working fine with alpha.11

Your Environment 🌎

Tech	Version
@material-ui/core	v5-alpha.12
@material-ui/data-grid	v4-alpha.6
React	v16.13.1
Next	v9.5.5
Browser	Chromium v86
TypeScript	v4.0.3

[oliviertassinari]

Please provide a minimal reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[oliviertassinari]

Oh, you have installed @material-ui/core: v5-alpha.12, you should have a peer dependency warning. The components here only work with @material-ui/core@^4.0.0.

[numToStr]

Oh, you have installed @material-ui/core: v5-alpha.12, you should have a peer dependency warning. The components here only work with @material-ui/core@^4.0.0.

I never got a warning about dependency in the console and also I didn't realize that data-grid is only meant for v4, until I updated to alpha.12.

Also, I don't know if this is coming from data-grid or not but I also the getting the fade deprecation warning which was also introduced in alpha.12.

webpack-internal:///../../node_modules/@material-ui/core/esm/styles/colorManipulator.js:290 Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality.

You should use `import { alpha } from '@material-ui/core/styles'`

[oliviertassinari]

The peer dependency warning is definitely here:

https://github.com/mui-org/material-ui-x/blob/30ee79ff6c20eda999760280e822a78307de38a4/packages/grid/data-grid/package.json#L39-L40

also the getting the fade deprecation warning

It's the same, the data grid isn't compatible with v5. We can't have it support v4 and v5 at the same time.

I have added the waiting for users upvotes tag. Please upvote this issue if you want the grid to update to v5. We will prioritize our effort based on the number of upvotes.

[numToStr]

@oliviertassinari Thanks for considering to update to v5. As, I am currently building a semi-dashboard type application, I will be to test both core v5 and data-grid and provide feedback.

[arpu]

Hey, i came to this after update to webpack 5 and need to update material-ui, would cool to have a v5 for this awesome grid!

[oliviertassinari]

@arpu I'm confused, do you need support for webpack v5 or Material-UI v5?

[arpu]

Material-UI v5

[oliviertassinari]

We can use https://npm-stat.com/charts.html?package=%40material-ui%2Fcore&package=%40material-ui%2Fstyled-engine to follow the relative adoption of v5 by the community vs. v4. At this point in time, it's marginal.

How about we switch as soon as v5 enters in the beta phase?

[numToStr]

@oliviertassinari I think it is a great decision.

As core v5 is receiving all the new features i.e new styling engine. I think it is fair that data-grid migrates to v5 after the beta.

[NixBiks]

Do you have an ETA on when v5 enters beta?

[njerschow]

is there any ETA on this?

[oliviertassinari]

While we have previously shared our plan to drop v4 support for the data grid and move to v5 only once v5 reaches the beta phase (the point in time where no more breaking changes are released), we can probably do more.

We are going to look into concurrent support of v4 and v5 for the data grid. In theory, it should be possible to support both at the same time. It would be a good stress test for us, to make sure the migration isn't too painful.

[oliviertassinari]

At this point in time, we are aware of two compatibility issues that need to be handled:

• change of structure of the theme. We need to handle theme.palette.type and theme.palette.mode.
• peer dependency warning. We need to widen the scope.

[oliviertassinari]

Fixed in #855. The next release v4.0.0-alpha.18 will be compatible with Material-UI v4 and v5.

We don't plan to duplicate the documentation. https://next.material-ui.com/components/data-grid/ will encourage to look at https://material-ui.com/components/data-grid/.

We plan to drop Material-UI v4 support once Material-UI v5 enters the beta phase (the end of BCs) which should allow more adoption.