Compatible Jsonform version for Material UI v5+

General
1

Hello Team,

We are using React based Application that runs with Jsonforms combined Material UI V4 support.

Now we are upgrading the Material V5 to pull the latest features and enhance the ui renderers wrt performance.

Post upgrade with MUI V5 premium, we are seeing instantanous crash with the pages that uses JSONforms. We doubt this could be related the version compatibility with older version of jsonforms and latest MUI version.

Can you please help us with most compatible version of Jsonforms that support Material v5 (premium/pro) along with the change log or upgrade guide.

Current Version Details:

  • “@jsonforms/core”: “3.2.1”,
  • “@jsonforms/material-renderers”: “^3.2.1”,
  • “@jsonforms/react”: “^2.3.2”,
  • “@mui/material”: “^5.15.16”,
  • “react”: “17.0.0”,
2

Hi @PreethiJG,

You need to make sure that the JSON Forms packages are always the exact same version, e.g. 3.2.1 for all of @jsonfoms/core, @jsonforms/react and @jsonforms/material-renderers.

We don’t support mixing the version of our packages, you will certainly run into problems like crashes if you mix them.

3

Thanks @sdirix for prompt reply. We are running into a different issue while updating package as per comments, were “areEquals” method is not support with 3.2.1

FYI., previously we were using 2.3.2 of jsonforms and due to material upgrade we had to upgrade jsonforms to 3.2.1, which is causing issues with compatibility

Do we have docs for deprecated methods from 2.3.2 and equivalent methods to used in 3.2.1

For “areEquals” issue we tried with below customisation, not sure if there’s existing method that can handle this

// Custom comparison function

export const customAreEqual = (prevProps, nextProps) => {
  // Implement your custom comparison logic here
  // For example, compare relevant props deeply
  // return _.isEqual(prevProps.data, nextProps.data);
  return (
    prevProps.data === nextProps.data &&
    prevProps.className === nextProps.className &&
    prevProps.id === nextProps.id &&
    prevProps.enabled === nextProps.enabled &&
    prevProps.path === nextProps.path
  );
};

Post using above code we seeing be below errors (20+ errors) with rendered block (mostly pointing to undefined errors with date picker or input renderer and the app crashes again

image
image720×494 90.7 KB

4

Hi @PreethiJG,

We have a small migration guide in which all major issues for upgrades are described, see here.

We no longer use areEquals, instead we rely on the default implementation of React.memo for performance optimization. I would like to recommend the same to you.

We didn’t have any drastic changes in general with the React Material renderer set besides the Material v5 upgrade and all changes needed for that. The issue in your screenshot seems to relate to the date pickers which changed a lot with the upgrade (and are still changing very often). So without further information I can’t really help you besides encouraging to patiently fight through all issues.

If you encounter an issue where you need help with, then it would be beneficial to post the whole code of the custom renderer, or even better a stack-blitz reproduction of the error. The more convenient we can take a look at an error, the faster and more likely we will be able to help.