Search code examples
reactjsmaterial-uiwarnings

Catching Material UI deprecation warnings


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.


Solution

  • 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 {};