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.

findDOMNode is deprecated in StrictMode

See original GitHub issue

The Evergreen-UI popover menu reports the following error in all browser consoles:

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 Box) in Box (created by Pane) in Pane (created by Context.Consumer) in withTheme(Pane) (created by Card) in Card (created by PopoverStateless) in PopoverStateless (created by Transition) in Portal (created by Transition) in Transition (created by Context.Consumer) in Stack (created by Positioner) in Positioner (created by Popover) in Popover (at UserMenu/index.jsx:29)

Issue Description The Evergreen package seems to use findDOMNode (when opening the Evergreen UI Menu Popover), which is depricated in a React App built using StrictMode.

To Reproduce This is my UserMenu function component. It works, but throws the deprication warning:

import React from "react";
import { Popover, Menu, Button, Position } from "evergreen-ui";

const UserMenu = () => {
   return (
        <div>
            <div>
                <Popover
                    position={Position.BOTTOM_RIGHT}
                    animationDuration={300}
                    content={
                        <Menu>
                            <Menu.Group>
                                <Menu.Item icon="person" onSelect={() => { }}>
                                    Option 1
                                </Menu.Item>
                                <Menu.Item icon="circle-arrow-right" onSelect={() => { }}>
                                    Option 2
                                </Menu.Item>
                                <Menu.Item icon="edit" onSelect={() => { }}>
                                    Option 3
                                </Menu.Item>
                            </Menu.Group>
                            <Menu.Divider />
                            <Menu.Group>
                                Log out
                            </Menu.Group>
                        </Menu>
                    }
                >
                    <Button marginRight={16}>User Menu</Button>
                </Popover>
            </div>
        </div>
    )
};

export default UserMenu;

Steps to reproduce

Load the component above in a React App in StrictMode
The ‘User Menu’ button should appear.
After clicking on the ‘User Menu’ button, the error gets raised in the console.

Package.json Versions “evergreen-ui”: “^4.27.4”, “react”: “^16.13.1”, “react-app-polyfill”: “^1.0.6”, “react-dom”: “^16.13.1”, “react-helmet-async”: “^1.0.6”, “react-redux”: “^7.2.0”, “react-router-dom”: “^5.2.0”, “react-scripts”: “3.4.1”, “react-spring”: “^9.0.0-beta.34”,

Environment: