Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

` console.<computed> | @ | 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

Issue Analytics

State:
Created 4 years ago
Comments:14 (9 by maintainers)

Top GitHub Comments

23reactions

sucy6330133commented, May 28, 2019

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.

21reactions

oliviertassinaricommented, May 31, 2019

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

Top Results From Across the Web

I am getting Material-UI: the component displayName ... - GitHub

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

Migration from v3 to v4 - Material UI - MUI

Every component forward their ref. This is implemented by using React.forwardRef() . This affects the internal component tree and display name and therefore ......

I am getting Material-UI: the component displayName is invalid ...

I am getting Material-UI: the component displayName is invalid warning after migration from v3 to v4 #15887. ashishsahu posted onGitHub. ` console.

Upgrading material-ui v3 to v4 causes redux form Field ...

Error: Warning: Failed prop type: Invalid prop component supplied to Field . The Field component comes from import { Field } from 'redux-form';....

@material-ui/core | Yarn - Package Manager

Each warning comes with a simple message that explains how to handle the deprecation. If no warnings are reported in the console, you...