Upgrading React application from Material UI v4 to v5

Question

I am upgrading Material UI from v4 to v5 in my react application. I am running react version 17.0.2. My first attempt to upgrade to v5 I used the codemod and I had too many unexplained errors so I rebase lined my application and installed the new v5 packages. Below is the list of old and new material ui packages in my package.json file.

"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@material-ui/core": "^4.12.3",
"@material-ui/icons": "4.9.1",
"@material-ui/lab": "^4.0.0-alpha.60",
"@material-ui/utils": "^4.11.2",
"@mui/icons-material": "^5.4.1",
"@mui/lab": "^5.0.0-alpha.68",
"@mui/material": "^5.4.1",
"@mui/styles": "^5.4.1",

I would like to convert the application module by module so that I can catch and fix problems as they occur. After making the changes in my first module I received the following error message:

export default common;

SyntaxError: Unexpected token 'export'

Questions:

1. Should it be possible to run both versions of material UI during the migration process or is it all of one or the other?
2. If is possible to run both versions, what is causing this error?
3. Do I need to make changes to Webpack or anything else to make the migration?
4. Would welcome any suggestions for migrating. I have looked at the documentation and unfortunately making changes as they indicate put me in a limbo state that does not offer much in the way of trouble shooting.

Answer 1

I just finished upgrading our react mono repo from material ui v4 to v5. My recommendation is, do not use codemods since people have different ways to customized their components style, it might not fit for all. At least for our case, it hangs. Here are the steps I did:

• install the packages mentioned in the migration guid
• update package names: @material-ui/icons -> @mui/icons-material, @material-ui/lab -> @mui/lab
• replace the createMuiTheme with createTheme, etc

Above steps won't break your app, should still function well

• then replace @material-ui/core with @mui/material, this step will take 80% of the work load. I did file by file, feature by feature. You should always check your app running well per change. I know it sounds like lots of work, but once you find a pattern, you will get faster. Here are the tricks:

(1) for any makeStyles, createStyles, I replace with an object, for instance: const classes = { name: (theme) => ({ fontSize: 18, fontWeight: 500, lineHeight: 1.1, color: theme.myNora.blue, }), clickable: { cursor: "pointer", } }

In your component, if material ui component, replace the className with sx; if generic html tag, replace the className with style

(2) for any withStyles, I replace it with styled(). You can use it with generic html tags and material ui components. If you need pass theme, make sure pass it like {theme}. In addition, if you have root in the withStyles, you will have to remove it when converting to styled().

• move datepicker from @mui/lab to @mui/x

That covers most of our load. Make sure you test your app very often during the migration, otherwise, you won't know which change break your app. Hope this would help you.