question-mark
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.

ForwardRef warnings [V4]

See original GitHub issue

Upgrading code to V4 (from V3), having no issues except for this warning message on a lot of components (but not all):

Warning: Failed prop type: ForwardRef(Grid): prop type component is invalid; it must be a function, usually from the prop-types package, but received undefined.

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

No errors

Current Behavior 😯

Get an error for about 40% of Material-UI components used in my application.

Steps to Reproduce 🕹

I have tried to reproduce this in codesandbox but cannot. I also have a hard time reproducing this in my own project. It seems completely arbitrary when it happens. It is not though, as it always happens to the same constructions.

See code:

<Grid container={true} alignItems="stretch" justify="center">
  <Grid item={true}>SomeText</Grid>
  <Grid item={true}><img alt="some image" href="etc" /></Grid>
</Grid>
<Grid container={true} alignItems="stretch" justify="center">
  <Grid item={true} xs={12}>Some item</Grid>
</Grid>

I get the error on the first Grid container, but not on the second Grid container. I have even tried to copy the exact code - only the first gets the error. The other thing all occurrences have in common is that they are all functional components using withStyles. But even then it seems to be a coin flip on which items get the error.

I have tried with both withStyles+createStyles exported from @material-ui/styles as well as @material-ui/core (just in case).

EDIT: Also tried to replace withStyles with the new useStyles. Same error still.

Context 🔦

N/A

Your Environment 🌎

Tech Version
Material-UI v4 (latest alpha)
Material-UI styles v4 (latest alpha)
React ~16.8 (also tried alpha ~16.9)
Browser Any
TypeScript Yes

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:15 (15 by maintainers)

github_iconTop GitHub Comments

2reactions
jwwisgerhofcommented, Apr 25, 2019

As the issue is not related to material-ui, and you have already helped me fix this problem I will close the issue @eps1lon. Thanks again for your help.

0reactions
jwwisgerhofcommented, Apr 24, 2019

Both Windows and Ubuntu (WSL). Both had the same issue. New vm was ubuntu (clean image).

Read more comments on GitHub >

github_iconTop Results From Across the Web

ForwardRef warnings [V4] #15471 - mui/material-ui - GitHub
Warning: Failed prop type: ForwardRef(Grid): prop type component is invalid; it must be a function, usually from the prop-types package, but ...
Read more >
Problem with react forwardref warning in console
and in console i can see an warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you...
Read more >
Forwarding Refs - React
Ref forwarding is an opt-in feature that lets some components take a ref they receive, and pass it further down (in other words,...
Read more >
The argument function of React.forwardRef ... - Rule | DeepScan
This rule applies when the argument function of React.forwardRef() does not use its second ref parameter. The purpose of applying React.
Read more >
Composition - Material UI - MUI
Did you mean to use React.forwardRef()?. Note that you will still get this warning for lazy and memo components if their wrapped component...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found