aula M4#A85 findDOMNode is deprecated in StrictMode.

[angelilton]

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 TrapFocus)
    in 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)))
    in WithStyles(ForwardRef(Menu)) (at main.js:42)
    in div (created by ForwardRef(Toolbar))
    in ForwardRef(Toolbar) (created by WithStyles(ForwardRef(Toolbar)))
    in WithStyles(ForwardRef(Toolbar)) (created by Styled(WithStyles(ForwardRef(Toolbar))))
    in Styled(WithStyles(ForwardRef(Toolbar))) (at main.js:32)
    in header (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(AppBar))
    in ForwardRef(AppBar) (created by WithStyles(ForwardRef(AppBar)))
    in WithStyles(ForwardRef(AppBar)) (at main.js:31)
    in Main (created by Context.Consumer)
    in Route (at app.js:46)
    in Switch (at app.js:44)
    in Suspense (at app.js:43)
    in App (created by Context.Consumer)
    in Route (at root.js:12)
    in Router (created by BrowserRouter)
    in BrowserRouter (at root.js:11)
    in Auth (at root.js:9)
    in Root (at src/index.js:10)
    in ErrorBoundary (at src/index.js:10)
    in StrictMode (at src/index.js:9)

oi daciuk poderia me ajudar com esse error, eu estou na aula 038 do modulo 4 quando eu dou o click no component

ele me volta esse error. não achei nada nas issues nem na internet para resolver. meu cod:

import React, { useContext, useState } from 'react'
import styled from 'styled-components'
import {
  AppBar,
  Toolbar as MaterialToolbar,
  IconButton,
  Typography,
  Menu,
  MenuItem
} from '@material-ui/core'
import { AccountCircle } from '@material-ui/icons'
import { ReactComponent as MainLogo } from 'pages/login/logo-react-zzaria.svg'
import { AuthContext } from 'contexts/auth'

const Main = () => {
  const [anchorElement, setAnchorElement] = useState(null)
  const { userInfo, logout } = useContext(AuthContext)

  const handleOpenMenu = (e) => {
    setAnchorElement(e.target)
  }
  const handleClose = () => {
    setAnchorElement(null)
  }

  const showUserName = userInfo.user.displayName.split(' ')[0]

  const open = Boolean(anchorElement)

  return (
    <AppBar>
      <Toolbar>
        <LogoContainer>
          <Logo />
        </LogoContainer>
        <Typography>hey, {showUserName}</Typography>

        <IconButton color="inherit" onClick={handleOpenMenu}>
          <AccountCircle />
        </IconButton>

        <Menu open={open} onClose={handleClose} anchorEl={anchorElement}>
          <MenuItem onClick={logout}>Logout</MenuItem>
        </Menu>
      </Toolbar>
    </AppBar>
  )
}

const Toolbar = styled(MaterialToolbar)`
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
`

const LogoContainer = styled.div`
  flex-grow: 1;
`
const Logo = styled(MainLogo)`
  height: 50px;
  width: 200px;

  & path {
    fill: #fff;
  }
  & line {
    stroke: #fff;
  }
`

export default Main

@fdaciuk

[fdaciuk]

Fala @angelilton! Esse erro é por falta de atualização do Material UI com a versão mais recente do React :\ Eles devem resolver isso no lançamento da v5.

Consegue subir seu projeto em um repositório aqui no GitHub? Assim eu baixo aqui e consigo te dar um caminho pra resolver esse warning :)

[angelilton]

https://github.com/angelilton/order-pizza-reactJS

[fdaciuk]

Oi @angelilton! Consegue gravar um videozinho da sua tela pra eu ver como simular o problema?

[angelilton]

fiz em forma de gif. ele dispara no click do <Menu>. mas se é apenas um erro do meterial UI, por mim tudo bem porque da para continuar tranquilamente. https://share.getcloudapp.com/ApuGRPyY

[fdaciuk]

Na verdade, o warning é por causa do <StrictMode> do React, que avisa quando há o uso de alguma feature que vai (ou pode ser) deprecada no futuro.

Mas o Material UI deve resolver isso na v5. Como o warning não trava sua aplicação, pode seguir assim sem problemas, e quando sair a v5, só atualizar :)

[fdaciuk]

@angelilton vou fechar a issue, mas se tiver qualquer problema, só avisar :)