HCL Commerce Version 9.1.12.0 or later

Upgrading the Material UI JavaScript to version 5

Use the Git bundle source to upgrade the Material UI JavaScript to version 5.

Before you begin

  • Apply the steps given below to your store source code before using the Git bundle source to upgrade the Material UI JavaScript to Version 5.
  • If you have not changed the default HCL Commerce packages folder:
    1. Ignore any step that mentions a change of code inside the packages folder.
    2. Copy and replace the default packages folder with the latest version.
      Note: It is not recommended to make any change in the default packages folder of HCL Commerce.
    3. Compare and merge the source code of the React-store folder with the latest version of code.

Procedure

  1. Refer to https://mui.com/material-ui/migration/migration-v4/ to get a clear background.
  2. Run the following commands: 
    npm install @mui/material @mui/styles
npm install @mui/lab
npm install @mui/icons-material
npm install @mui/material @mui/styled-engine-sc styled-component
  3. Remove old material UI dependencies from package.json files.
  4. Do a global search and replace import styled from "styled-components with import styled from "@mui/styled-engine-sc";
  5. Run the npx @mui/codemod v5.0.0/preset-safe src/elements command folder by folder.
    Note:
    • The operation will miss some of the components. Be sure to only run this command once as it will do most of search and replace work for you.
    • If you run this command twice, the result will be wrong.
  6. Update theme spacing function.
    1. Do a global search from theme.spacing(", remove 'px'. e.g. ${theme.spacing(3)}px to ${theme.spacing(3)}
    2. To calculate the size using the theme.spacing parameter, use the CSS calc function.
    For example, a global search from max-width: ${window.innerWidth - theme.spacing(3)}px; to max-width: calc(${window.innerWidth}px - ${theme.spacing(3)});.
  7. Update the Styled function. For details see https://mui.com/system/styled/.
    For example, in case of Native HTML element, the Styled-Component function was previously used with the syntax styled.div. It is now changed to styled("div").
  8. If applicable, do the steps for Breaking changes in v5, part one: styles and themes and Breaking changes in v5, part two: core components. Also:
    1. Update the MUI Picker by updating the Picker Util Provider. For details see https://mui.com/material-ui/migration/v5-component-changes/.
    2. Update the MUI Popper by updating the modifier property to array instead of object. For details see https://popper.js.org/docs/v2/migration-guide/.
  9. Check all components and pages to identify potential issues and fixes.
    For example, issues related to styled stepper that can be resolved by adding padding and issues related to summary can be resolved by updating the accordion.
  10. Ensure that you merge the files, because the default MUI component parsing logic is added in the use-espot.tsx hook, which supports basic container, grid, and typography properties.
  11. Run a build.
    1. Add roll-up configuration for mapping mui/styled-engine to mui/styled-engine-sc as we are using a styled-component.
    2. Use craco to add webpack configuration for mapping mui/styled-engine to mui/styled-engine-sc. For more details see craco.config.js in the react-store folder.
    3. Update tsconfig file for a similarity in maps of mui/styled-engine and mui/styled-engine-sc.

Results

The MUI JavaScript is sucessfully updated.