Upgrade NextJS + MUI v4 to v5

upgrade-mui-v4-to-v5.md

Upgrade NextJS + MUI v4 to v5

1. yarn add @mui/material @mui/styles @emotion/react @emotion/styled @emotion/cache @emotion/server @mui/icons-material @mui/lab date-fns @onextech/gvs-kit @onextech/material-ui-landing
2. In package folder do npx @mui/codemod v5.0.0/preset-safe src
3. In package.json, remove legacy packages: yarn remove @material-ui/core @material-ui/icons @material-ui/lab @material-ui/pickers
4. In babel.config.js, ensure that you have this:

plugins: [
	'@mui/material': {
	  transform: '@mui/material/${member}',
	  preventFullImport: true,
	},
	'@mui/icons-material': {
	  transform: '@mui/icons-material/${member}',
	  preventFullImport: true,
	},
	'@mui/lab': {
	  transform: '@mui/lab/${member}',
	  preventFullImport: true,
	},
	...
]

5. Update theme provider config in _app.tsx, _document.tsx, Providers.tsx, App.tsx
6. Ensure that gvs-kit is running on v3
7. Search project for @material-ui and ensure there is none
8. Replace DatePicker imports: '@material-ui/pickers' with '@mui/lab'
9. Run yarn build, yarn lint, and yarn test to ensure all okay. Have fun cleaning up.
10. If you run into yarn lint issues, as though your fixes are not being applied, ensure that you git add your fixed lint code to have it pass. This is because we're using lint-staged.