React-admin: Upgrade Material UI to Latest Stable

[ragboyjr]

I'm pretty new to material ui, but it looks like latest stable is at 3.2, but react-admin is still on ^1.4. When implementing customizations to the react-admin, it caused me to lose some time because I was trying to figure out why certain Material UI code wasn't working and then I found out react-admin just uses an older version.

Is there anything stopping this project from being able to bump up to material ui 3.2 other than just the work to port it over?

Thanks again for all the hard work into this library!

[fzaninotto]

Material-ui 3 is a BC break over material-ui 1, so upgrading that dependency would be a BC break for react-admin, too.We'd have to release react-admin 3.0. Since the latest stable (2.0) is not that old (May 2018), we'll wait a few more weeks before breaking BC again.

[oliviertassinari]

Material-UI v3 introduces the following breaking change over Material-UI v1:

1. Drop support of Firefox, from v45 to v51. Support starts with Firefox v52 now.

What browser versions is supported by react-admin? Maybe there is no breaking change if Firefox 41 wasn't supported.

[fzaninotto]

We haven't listed the browser versions we support. So in react-admin terms, dropping support for FF < 52 isn't a BC break per se ;)

However, that would still require a 3.0, and major versions frighten users because of the upgrade cost. I'd rather continue using an old material-ui version for another couple of months rather than rushing a major just to get the new features.

@oliviertassinari this is where our release strategies diverge.

[phacks]

@fzaninotto Hi! Coming back to this issue since recent (post v3.0.0) versions fix a bug with Modals I encountered in my React Admin project. Looks like v3.3.1 contains the actual bug fix I need.

I totally understand the need to not jump majors too frequently and I appreciate the consideration you have regarding developer experience. However, would you have an estimation of a timeline for the release of major version updating MaterialUI ? Depending on that timeline, I can either try and help you release and/or monkey-patch MaterialUI on my end.

Should you need more info about the bug I can try and create a reproduction repo, but I’m not sure that it is valuable since the fix was already shipped in either https://github.com/mui-org/material-ui/pull/13351 or https://github.com/mui-org/material-ui/pull/13389.

[fzaninotto]

The guys at material-ui are hard at work planning the next BC break with the hooks rewrite, so we'll definitely wait for that effort to finish before releasing a major on our side.

[phacks]

Oh yes that makes sense, thanks for the update!

[djhi]

If you are using yarn, have you tried setting the required version in the resolutions key inside your package.json ? It might just work.

PS: don't upgrade the icons package though, some icons we use in react-admin are gone in the last versions

[oliviertassinari]

@fzaninotto Yes, depending on how React moves forward with the hook API, we might hold on Material-UI v4 release to rewrite the internals of Material-UI to use the hooks. Hopefully, it won't have any userland implications, just better performance and a better debug experience.

[fzaninotto]

We're looking forward to using the useStyle API, so we'll wait for that to become stable to upgrade. If it's in a minor release, it's even better!

[oliviertassinari]

@fzaninotto We might move forward with a design system component too: https://github.com/mui-org/material-ui/pull/13632.

[fzaninotto]

nice!

[fzaninotto]

@phacks regarding the TablePaginationActions BC break, as the component is only used for propTypes, it's possible to remove the import and write the propTypes by hand instead. Would you like to open a PR for that?

[Bnaya]

Is there any opened tracking issue for this? (that will be blocked on material ui)

[fzaninotto]

@Bnaya not sure what you mean by that.

[maicWorkGithub]

warning react-admin > ra-core > [email protected]: This project i s no longer maintained.

[fzaninotto]

@maicWorkGithub see #1999

[dobryanskyy]

Why is this closed? Are you not planning to upgrade at all?

[fzaninotto]

No, we're not planning to update to the existing material-ui (v3), only to the next one (v4), and it's not out yet. Please read the entire conversation for details.

[JacquesBonet]

There is a solution for those who want to use react-admin with material-ui 3.x.

The compatibility problem is with material-ui >= 3.6, because material-ui use react-redux 6.x as dependency, and react-admin isn't compatible with react-redux 6.0.

material-ui works well with react-redux 5.x, so the solution is to force some libraries releases used by material-ui to be compatible with react-admin.

Yarn tools as the resolutions directive which permit to specify the components release we want to use

Here an extract of my package.json root project file:

  "dependencies": {
    "@material-ui/core": "~3.9.2",
    "@material-ui/icons": "~3.0.2",
    "classnames": "~2.2.5",
    "history": "~4.7.2",
    "ra-input-rich-text": "^2.7.1",
    "ra-language-english": "^2.7.0",
    "ra-language-french": "^2.7.1",
    "ra-tree-ui-materialui": "^2.7.1",
    "react": "~16.8.2",
    "react-admin": "^2.7.1",
    "react-dom": "~16.8.2",
    "react-fontawesome": "^1.6.1",
    "react-jss": "~8.6.1",
    "react-redux": "~5.0.7",
    "react-router-dom": "~4.3.1",
    "react-scripts": "~2.1.5",
    "recompose": "^0.28.2",
    "redux": "~4.0.1",
    "redux-form": "~7.4.0",
    "redux-saga": "~0.16.0",
  },
  "resolutions": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-proposal-export-default-from": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "~7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-ramda": "~2.0.0",
    "@material-ui/core": "~3.9.2",
    "@material-ui/icons": "~3.0.2",
    "autosuggest-highlight": "^3.1.1",
    "classnames": "~2.2.5",
    "history": "~4.7.2",
    "inflection": "~1.12.0",
    "lodash": "~4.17.5",
    "material-ui-chip-input": "1.0.0-beta.14",
    "prop-types": "~15.7.2",
    "ra-input-rich-text": "^2.7.1",
    "ra-language-english": "^2.7.0",
    "ra-language-french": "^2.7.1",
    "ra-tree-ui-materialui": "^2.7.1",
    "react": "~16.8.2",
    "react-admin": "^2.7.1",
    "react-autosuggest": "^9.4.2",
    "react-dom": "~16.8.2",
    "react-dropzone": "~4.0.1",
    "react-fontawesome": "^1.6.1",
    "react-headroom": "^2.2.4",
    "react-jss": "~8.6.1",
    "react-redux": "~5.0.7",
    "react-router-dom": "~4.3.1",
    "react-scripts": "~2.1.5",
    "react-transition-group": "^2.2.1",
    "recompose": "~0.26.0",
    "redux": "~4.0.1",
    "redux-form": "~7.4.0",
    "redux-saga": "~0.16.0"
  },

Jacques

[jinman]

Which MUI styling solution is react-admin planning to use in the next version (that uses MUIv4.0)? (makeStyles) Hook API, (styled) API from @material-ui/styles?

[oliviertassinari]

@jinman Material-UI is using a single styling solution. hook, hoc, styled are different APIs powered by the same logic. In the core of Material-UI, we gonna try to move from withStyles to makeStyles. I still haven't lost sight of using something more popular, https://github.com/mui-org/material-ui/issues/6115

[jinman]

@oliviertassinari do you have any recommendations on which ones we should leverage so we can easily upgrade to react-admin latest version when MUIv4 is integrated? We were thinking about using styled because of the popularity but right now its very difficult to integrate.

[oliviertassinari]

@jinman

• The advantage of makeStyles is that it's easier to type with TypeScript, faster at runtime, does not require a HOC, so it's easier to edit and delete code.
• The advantage of withStyles is that it's allowing to customize a component with minimal boilerplate:

const CustomTableCell = withStyles(theme => ({
  head: {
    backgroundColor: theme.palette.common.black,
    color: theme.palette.common.white,
  },
  body: {
    fontSize: 14,
  },
}))(TableCell);

• The advantage of styled is that it's encouraging to style each sub component and not the component itseft.

We were thinking about using styled because of the popularity but right now its very difficult to integrate.

I'm personally using makeStyles, but styled isn't a bad idea. We might revisit the approach in v5. I this is from an internal dicussion. We have so many components that no matter what we do, it will most likely involve a codemod:

How would you feel about giving up on @material-ui/styles and going with styled-components. I have realized a few things:
styled-components growth is impressive: https://www.rank2traffic.com/styled-components.com
@material-ui/styles is draining time away from what's important; the components.
Many people are using the library, it would improve the bundle size deduplication.
Performance are more than great: http://necolas.github.io/react-native-web/benchmarks/.
It will help with overrides, the strategy we can use is to have .mui-button on the root element, .mui-button-label on the label element, .active for the active state, basically use styled-components with global class names, yet, we will still take advantages of the style isolation.
It supports streaming
Many people ask for it: mui-org/material-ui#6115.
It's more React future proof. I not sure how we can handle SSR reconciliation if React start to asynchronous render on the server.
We could potentially switch between https://github.com/callstack/linaria and emotion.

We have a few challenges to solve: more components, smaller bundle, better performance, better customization. It will be our focus between v4 and v5.

[dgkm]

"react-dom": "~16.8.2",
"react-fontawesome": "^1.6.1",
"react-jss": "~8.6.1",
"react-redux": "~5.0.7",
"react-router-dom": "~4.3.1",
"react-scripts": "~2.1.5",
"recompose": "^0.28.2",
"redux": "~4.0.1",
"redux-form": "~7.4.0",
"redux-saga": "~0.16.0",

Tried this option with resolutions, but getting error(s) such as

> You should not use <Link> outside a <Router>

Is there any alternative approach to use the react-admin with the latest material-ui???

[fzaninotto]

see #3102

[christopheblin]

Sorry to comment on a closed issue but it seems that #3102 has been reverted so we are still locked on 1.5.1.

I've done npm add react-admin @material-ui/core @material-ui/icons and it seems to do fine (i.e only material-ui/core 3.9.3 is in the package-lock.json, there is no duplicate with 1.5.1)

The only thing is some very big warnings in the console (they seem to be displayed as console.error). Is that the problem ?

[fzaninotto]

We won't work on upgrading material-ui in the react-admin 2.x branch anymore. We've gone that path, and iy's impossible to have a core compatible with both mui 1.x and mui 3.x.

React-admin 3.x will use the latest material-ui (4.x).

[dobryanskyy]

Do you have any plans on react-admin 3 timing? Mui 4 is already in beta...

[djhi]

@dobryanskyy https://github.com/marmelab/react-admin/issues/3194