Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upgrade Material UI to Latest Stable #2399

Closed
ragboyjr opened this issue Oct 8, 2018 · 29 comments
Closed

Upgrade Material UI to Latest Stable #2399

ragboyjr opened this issue Oct 8, 2018 · 29 comments

Comments

@ragboyjr
Copy link

ragboyjr commented Oct 8, 2018

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
Copy link
Member

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
Copy link
Contributor

oliviertassinari commented Oct 17, 2018

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
Copy link
Member

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
Copy link
Contributor

phacks commented Nov 20, 2018

@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 mui/material-ui#13351 or mui/material-ui#13389.

@fzaninotto
Copy link
Member

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
Copy link
Contributor

phacks commented Nov 20, 2018

Oh yes that makes sense, thanks for the update!

@djhi
Copy link
Collaborator

djhi commented Nov 20, 2018

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
Copy link
Contributor

@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
Copy link
Member

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
Copy link
Contributor

@fzaninotto We might move forward with a design system component too: mui/material-ui#13632.

@fzaninotto
Copy link
Member

nice!

@fzaninotto
Copy link
Member

@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?

phacks added a commit to phacks/react-admin that referenced this issue Nov 21, 2018
The import

```
import TablePaginationActions from '@material-ui/core/TablePaginationActions';
```

does not work anymore in material-ui’s more recent versions, as per
mui/material-ui#13524.

This commit makes transitioning from `material-ui@1.4.1` to `3.5.1` easier.
phacks added a commit to phacks/react-admin that referenced this issue Nov 21, 2018
The import

```
import TablePaginationActions from '@material-ui/core/TablePaginationActions';
```

does not work anymore in material-ui’s more recent versions, as per
mui/material-ui#13524.

This commit makes transitioning from `material-ui@1.4.1` to `3.5.1` easier.
phacks added a commit to phacks/react-admin that referenced this issue Nov 21, 2018
The import

```
import TablePaginationActions from '@material-ui/core/TablePaginationActions';
```

does not work anymore in material-ui’s more recent versions, as per
mui/material-ui#13524.

This commit makes transitioning from `material-ui@1.4.1` to `3.5.1` easier.
fzaninotto added a commit that referenced this issue Nov 21, 2018
…ion-proptypes

[#2399] chore: hardcode TablePaginationAction proptypes
@Bnaya
Copy link
Contributor

Bnaya commented Dec 22, 2018

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

@fzaninotto
Copy link
Member

@Bnaya not sure what you mean by that.

@maicWorkGithub
Copy link

warning react-admin > ra-core > react-router-redux@5.0.0-alpha.9: This project i s no longer maintained.

@fzaninotto
Copy link
Member

@maicWorkGithub see #1999

@dobryanskyy
Copy link

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

@fzaninotto
Copy link
Member

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
Copy link
Contributor

JacquesBonet commented Feb 27, 2019

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
Copy link

jinman commented Mar 10, 2019

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
Copy link
Contributor

@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, mui/material-ui#6115

@jinman
Copy link

jinman commented Mar 28, 2019

@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
Copy link
Contributor

@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/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
Copy link

dgkm commented Mar 31, 2019

"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
Copy link
Member

see #3102

@christopheblin
Copy link

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
Copy link
Member

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
Copy link

dobryanskyy commented May 15, 2019

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

@djhi
Copy link
Collaborator

djhi commented May 15, 2019

@dobryanskyy #3194

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests