Can you please support Martial UI v5?

[msalahz]

Can you please support Martial UI v5?

[DanielLivingston32]

+1

[jy95]

I created a fork (not backwards compatible) as MUI v5 is official now, it would be a problem for people that wants to migrate to it such as me.

Which means in short this for Image component :

import CircularProgress from '@mui/material/CircularProgress'; // v5
// import CircularProgress from '@material-ui/core/CircularProgress'  // v4 and others
import common from '@mui/material/colors/common' // v5
// import common from '@material-ui/core/colors/common' // v4 and others
import grey from '@mui/material/colors/grey' // v5
// import grey from '@material-ui/core/colors/grey' // v4 and others
import BrokenImage from '@mui/icons-material/BrokenImage' // v5
//import BrokenImage from '@material-ui/icons/BrokenImage' // v4 and others

And this for package.json :

  "peerDependencies": {
    "@material-ui/icons": "^1.0.0 || ^3.0.0 || ^4.0.0",
    "@mui/icons-material": "^5.0.0",
    "@material-ui/core": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0",
    "@mui/material": "^5.0.0",
    "react": "^16.3.0 || ^17.0.0"
  },

If you wish to preserve v4 users for some time, you can conditionally import the needed stuff based on what is available. Such as using a new file called 'backward-compatibility.js'

function detectVersion() {
  try {
      require.resolve("@material-ui/core");
      return "Not v5"";
  } catch(e) {
      return "v5";
  }
}

const detectedVersion = detectVersion();
export const CircularProgress = (detectedVersion === "v5") ? '@mui/material/CircularProgress' : '@material-ui/core/CircularProgress' ;
export const common = (detectedVersion === "v5") ? '@mui/material/colors/common' : '@material-ui/core/colors/common';
export const grey = (detectedVersion === "v5") ? '@mui/material/colors/grey' : '@material-ui/core/colors/grey';
export const BrokenImage = (detectedVersion === "v5") ? '@mui/icons-material/BrokenImage' : '@material-ui/icons/BrokenImage' ;

These paths can so be reused in your Image component.

[ThukuWakogi]

My attempt in making material-ui-image support mui v5 using patch-package

diff --git a/node_modules/material-ui-image/lib/components/Image/Image.js b/node_modules/material-ui-image/lib/components/Image/Image.js
index 8025af2..2386712 100644
--- a/node_modules/material-ui-image/lib/components/Image/Image.js
+++ b/node_modules/material-ui-image/lib/components/Image/Image.js
@@ -9,13 +9,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _CircularProgress = _interopRequireDefault(require("@material-ui/core/CircularProgress"));
+var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 
-var _common = _interopRequireDefault(require("@material-ui/core/colors/common"));
+var _common = _interopRequireDefault(require("@mui/material/colors/common"));
 
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
+var _grey = _interopRequireDefault(require("@mui/material/colors/grey"));
 
-var _BrokenImage = _interopRequireDefault(require("@material-ui/icons/BrokenImage"));
+var _BrokenImage = _interopRequireDefault(require("@mui/icons-material/BrokenImage"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 

[orinoco]

Thanks for the fork @jy95 - works well.

Worth mentioning I needed to update my imports:

+import Image from "@jy95/material-ui-image";
-import Image from "material-ui-image";

[prionkor]

do not conditionally import, create a new version instead.

[emefye]

+1

[tkmin]

No updates in previous 6 months, Material UI v5 compatible update, please~~~~~~ @jy95 @orinoco thank you anyway, it worked for me as well.

[leMaik]

PRs are welcome, the solution above looks nice. We don't use MUI v5 and thus didn't have a reason to port it, yet.

[elyobo]

@jy95 are you interested in making your changes as a PR for this repo?

[d2vid]

We went with https://github.com/benmneb/mui-image which supports MUI v5.