Material-ui: I am getting Material-UI: the component displayName is invalid warning after migration from v3 to v4

[ashishsahu]

` console. | @ | index.js:1437
-- | -- | -- | --
  | (anonymous) | @ | breadcrumbs.js:76
  | printWarning | @ | warning.js:34
  | warning | @ | warning.js:58
  | (anonymous) | @ | withStyles.js:32
  | ./src/pages/App/components/Header/components/MultiISP/index.js | @ | index.js:155
  | __webpack_require__ | @ | bootstrap:786
  | fn | @ | bootstrap:149
  | ./src/pages/App/components/Header/index.js | @ | index.js:550
  | __webpack_require__ | @ | bootstrap:786
  | fn | @ | bootstrap:149
  | ./src/pages/App/index.js | @ | index.js:405
  | __webpack_require__ | @ | bootstrap:786
  | fn | @ | bootstrap:149
  | Promise.then (async) |   |  
  | ./src/containers/App.js | @ | App.js:25
  | __webpack_require__ | @ | bootstrap:786
  | fn | @ | bootstrap:149
  | ./src/index.js | @ | CustomStyle.js:209
  | __webpack_require__ | @ | bootstrap:786
  | fn | @ | bootstrap:149
  | 0 | @ | subscriberStatus.js:70
  | __webpack_require__ | @ | bootstrap:786
  | checkDeferredModules | @ | bootstrap:45
  | webpackJsonpCallback | @ | bootstrap:32
  | (anonymous) | @ | main.chunk.js:1

`

[joshwooding]

Can you provide a minimal reproducible example please. A codesandbox or a repository will do :)

[jmcpeak]

I just got the same thing - I'll try to find it and make a PR to add it to the documentation.

process.env.NODE_ENV !== "production" ? warning(typeof classNamePrefix === 'string', ['Material-UI: the component displayName is invalid. It needs to be a string.', "Please fix the following component: ".concat(Component, ".")].join('\n')) : void 0;

So it seems like they want a displayName set for development. I'm using recompose and can set it with setDisplayName() - but shouldn't there be a switch?

[oliviertassinari]

@jmcpeak How can we reproduce the problem?

[jmcpeak]

@jmcpeak How can we reproduce the problem?

Use recompose...

[oliviertassinari]

Could you provide a codesandbox?

[jmcpeak]

I'm still trying to create a sandbox - but...

I found the issue...

withStyles() is being called with an object not a function - that object has a displayName property - but it is never being used.

In this file:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui-utils/src/getDisplayName.js

this method: function getDisplayName(Component)

If the type of Component is an object, the switch only checks for: Component.$$typeof

But if the object has a displayName - it is ignored.

I'm still working on creating an example... more to come...

[ashishsahu]

Can you provide a minimal reproducible example please. A codesandbox or a repository will do :)

I am working on client project, so not able to share repository. I will try to create codesandbox link and let you know. Thank you for your reply :)

[oliviertassinari]

We might be able to introduce a new warning in development, waiting for the codesandbox :).

[MarekJavurek]

Same issue too... :( Cant find way to fix it...
Warning: Material-UI: the component displayName is invalid. It needs to be a string. Please fix the following component: [object Object].

[sucy6330133]

The reason is the wrapped component cannot be recognized by withStyles().
For example, the code,
withStyle(styles)(connect()(MyComponent)) will throw the warning.
After changing it to,
connect()(withStyle(styles)(MyComponent)), the warning is fixed.

[ashishsahu]

The reason is the wrapped component cannot be recognized by withStyles().
For example, the code,
withStyle(styles)(connect()(MyComponent)) will throw the warning.
After changing it to,
connect()(withStyle(styles)(MyComponent)), the warning is fixed.

Thank you very much @sucy6330133 :)

[oliviertassinari]

I can reproduce the warning doing the following:

export default compose(
  withStyles(styles),
  React.memo,
)(MyComponent);

Warning: Material-UI: the component displayName is invalid. It needs to be a string.
Please fix the following component: [object Object].

[drew-dulgar]

Also experiencing this issue - is the new expectation with withStyles/makeStyles not to allow an object passed in, but always a function?

[oliviertassinari]

It will be fixed in v4.0.2, this weekend.