Migration of Material-UI v4 to Material-UI v-5

Technology evolves at a pace we can hardly keep up with. Material-UI v5 is on fire. Here’s a quick guide to upgrade your react applications

I will take you through some easy steps to convert your material-UI v4 applications into material-UI-v5 versions. The older release of material-UI-v4 has some bugs and needed improvements with the styles so v5 was introduced with the fixes.

1. Update React Version

Update React version from v16 to v17. As it was the minimum requirement for Material-UI 5.

npm install –save react@latest

Note* if you have multiple versions of react and react-dom you might face some conflicts so first verify by

npm ls react
npm uninstall react
npm ls react-dom
npm uninstall react-dom

2. Upgrade packages to the latest version

npm install react-scripts@latest
npm install react-dom@latest

3. Update MUI Version

To use the v5 version of MUI Core, you need to update the following packages

npm install @material-ui/core@next @emotion/react @emotion

4. Convert the material-UI packages

We can convert from older way into latest way

@material-ui/core -> @mui/material
@materail-ui/system -> @mui/system
@material-ui/styles -> @mui/styles
@material-ui/icons -> @mui/icons-material
@material-ui/lab -> @mui/lab
@material-ui/types -> @mui/types
@material-ui/styled-engine -> @mui/styled-engine
@material-ui/styled-engine-sc ->@mui/styled-engine-sc
@material-ui/private-theming -> @mui/private-theming
@material-ui/codemod -> @mui/codemod
@material-ui/docs -> @mui/docs
@material-ui/envinfo -> @mui/envinfo

5. Peer Dependencies

npm install @emotion/react @emotion/styled

6. Install CodeModeCLi

One of the newly added features to version 5 is the codemod-cli, which can automatically migrate Material-UI 4 codebases to the newest version. You can check if codemode works or codemode@next gets work at your side.

npm install @mui/codemode
npm install @mui/codemode@next
//execute this command once on the specific folder you want to convert
npx @mui/codemod v5.0.0/preset-safe src
npx @mui/codemod@next v5.0.0/preset-safe src 

To learn more about codemods-cli, study Effective Refactoring with Codemods by Edd Yerburgh video.

7. Resolve the conflicts

If you are using date pickers you might face conflicts. So we need to migrate from @material-ui-pickers.

@material-ui/pickers => @mui/lab

Make sure you have installed the latest version, "@mui/lab": ^5.0.0-alpha.30" or above.
Read the article in detail https://mui.com/guides/pickers-migration/

8. Uninstall Older Version

Once your application has completely migrated to MUI v5, you can remove the old @material-ui/* packages by running yarn remove or npm uninstall.

9. package.json

Remove node_modules and set your pacakge.json file as mentioned below, then do npm i to install all the packages

Material-UI Version 5 Supported Browsers

The following minimal versions are supported by the default bundle:

• Chrome 84 (up from 49)
• Edge 85 (up from 14)
• Firefox 78 (up from 52)
• Safari 13 (macOS) and 12.2 (iOS) (up from 10)
• and more…

Reference

Migration from v4 to v5 - MUI

Migration from @material-ui-pickers - MUI

Material-UI 5 is Coming: Here’s What I’m Excited About