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.

Menu Component throws Error, I believe in conjunction with the popover element.

See original GitHub issue

Copying the code straight to the react project from the material-ui documentation, https://codesandbox.io/s/sm1zv?file=/demo.js the following error appears;

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://fb.me/react-strict-mode-find-node
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by Transition)
    in Transition (created by ForwardRef(Grow))
    in ForwardRef(Grow) (created by Unstable_TrapFocus)
    in Unstable_TrapFocus (created by ForwardRef(Modal))
    in div (created by ForwardRef(Modal))
    in ForwardRef(Portal) (created by ForwardRef(Modal))
    in ForwardRef(Modal) (created by ForwardRef(Popover))
    in ForwardRef(Popover) (created by WithStyles(ForwardRef(Popover)))
    in WithStyles(ForwardRef(Popover)) (created by ForwardRef(Menu))
    in ForwardRef(Menu) (created by WithStyles(ForwardRef(Menu)))

package.json

"@material-ui/core": "^4.11.0",
    "@material-ui/icons": "^4.9.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3"

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

sgehrmancommented, Sep 23, 2020

just installed and first thing I tired got this bug. Push the fix.

1reaction

crorafcommented, Sep 5, 2020

Wrapping your app with React.StrictMode element should produce the error, as it is doing extra checks that detect the error. Removing the React.StrictMode wrapping should “hide” the error.

Top Results From Across the Web

Warning when using Menu inside HStack · Issue #3173 - GitHub

I am having a similar issue with the Popover component, and wrapping the entire component in a Box worked to clear the error...

Popover menu renders in different place than the anchor ...

Since the menu state is maintained within DashboardNavbar , opening the menu causes a re-render of DashboardNavbar and therefore a re-definition ...

Building Accessible Menu Systems - Smashing Magazine

The only thing that really makes us think “menu” is the styling of the nested lists and the way they are revealed on...

JavaScript · Bootstrap

popover. Constructor . If you'd like to get a particular plugin instance, retrieve it directly from an element: $('[rel="popover"]'). data('popover') .

How To Use The Popover Element Video - ThemeFusion

SupportAvada DocsVideo TutorialsHow To Use The Popover Element Video ... The Table Of Contents Element Video · How To Use The Avada Mega...