Catching Material UI deprecation warnings

Question

We have a central shared material UI theme in our company that individual teams pull into their codebases.

While we try to always stay on the ball with the latest versions the central repository can't be updated at the same pace when there are breaking changes (like we have on the path from v4 to v5)

Now we have a newer version in our local codebase than in the central one and we are getting the deprecation warning when creating the theme that fade is renamed to alpha.

Material-UI: The `fade` color utility was renamed to `alpha` to better describe its functionality.

This is also thrown in many of our tests and I would like to find a way to suppress this error for the time being, is there an easy way?

I know that we switched already every usage of fade to alpha in our codebase, just the central one still uses the old notation.

score 3 · Accepted Answer · answered Aug 25 '21 at 12:14

We actually wrote a wrapper like this:

if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test') {
  const errorFn = global.console.error;
  const warnFn = global.console.warn;

  const contains = (target, pattern) => {
    let value = 0;
    pattern.forEach(word => (value = value + target.includes(word)));
    return value === 1;
  };

  const ignoreListError = [
    'The `fade` color utility was renamed to `alpha` to better describe its functionality.',
    'the createMuiTheme function was renamed to createTheme',
  ];

  const ignoreListWarn = ['The `theme.typography.round` helper is deprecated.'];

  global.console.error = msg => {
    if (!(typeof msg === 'string' && msg.indexOf('Material-UI') !== -1 && contains(msg, ignoreListError))) {
      errorFn(msg);
    }
  };

  global.console.warn = msg => {
    if (!(typeof msg === 'string' && msg.indexOf('Material-UI') !== -1 && contains(msg, ignoreListWarn))) {
      warnFn(msg);
    }
  };
}

export {};

You can put the file above (`console-wrapper.ts` in our case) anywhere it fits your codebase and then just import it in your central file like `src/index.tsx` with `import 'utils/console-wrapper';`. Furthermore if you have a central tests file you might also want to import it there e.g. a `setupTests.js` or something alike. — Jannis Hell, Feb 23 '22 at 10:25

score -1 · Answer 2 · answered Aug 08 '21 at 08:18

-1

try updating packages npm update I found that the deprecated 'fade' property was used in the implementation of some material ui components when I updated it the warning disappeared

answered Aug 08 '21 at 08:18

user16616989

1

No, as I said I know exactly where the error comes from and I can not update that - so I need to find a way to catch and ignore the error. – Jannis Hell Aug 09 '21 at 09:12

Catching Material UI deprecation warnings

2 Answers2